js上传图片预览

浏览数：51 / 时间：2015年06月09日

最近项目中用到的图片上传前预览功能，兼容IE6-9，FF

<body>
            <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">

由于项目中有多个上传按钮，需要针对网上示例作一些修改，实际使用代码：

复制代码
function setImagePreview(fileObj, previewObj, localImg) {

var docObj=document.getElementById(fileObj);
var imgObjPreview=document.getElementById(previewObj);
if(docObj.files && docObj.files[0]){
    //火狐下，直接设img属性
    imgObjPreview.style.display = ‘block‘;
    imgObjPreview.style.width = ‘120px‘;
    imgObjPreview.style.height = ‘80px‘;
    //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(localImg);
    //必须设置初始大小
    localImagId.style.width = "120px";
    localImagId.style.height = "80px";
    //图片异常的捕捉，防止用户修改后缀来伪造图片
    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;

}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js上传图片预览