上传图片预览JS脚本 Input file图片预览的实现示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By:DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {

    var docObj=document.getElementById("doc");
    var imgObjPreview=document.getElementById("preview");
    //files属性:返回一个 Files 集合,由指定文件夹中包含的所有 File 对象组成,包括设置了隐藏和系统文件属性的文件。
    if(docObj.files &&docObj.files[0]){
        //火狐下,直接设img属性
        imgObjPreview.style.display = 'block';
        imgObjPreview.style.width = '150px';
        imgObjPreview.style.height = '180px'; 
        //imgObjPreview.src = docObj.files[0].getAsDataURL();

        //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式

        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }else{
        //IE下,使用滤镜
        //
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        var localImagId = document.getElementById("localImag");
        //必须设置初始大小
        localImagId.style.width = "150px";
        localImagId.style.height = "180px";
        //图片异常的捕捉,防止用户修改后缀来伪造图片    
        try{
        localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
        }
        catch(e)
        {
        alert("您上传的图片格式不正确,请重新选择!");
        return false;
        }
        imgObjPreview.style.display = 'none';
        document.selection.empty();
    }
    return true;
}

</script>
</head>

<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td height="101" align="center">
                    <div id="localImag">
                        <img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;">
                    </div>
                </td>
            </tr>
            <tr>
                <td align="center" style="padding-top:10px;">
                    <input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();">
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

posted @ 2017-08-18 05:10  波罗斯の程序日记  阅读(281)  评论(0编辑  收藏  举报