首页 > 代码库 > 上传图片带预览功能兼容IE和火狐等主流浏览器

上传图片带预览功能兼容IE和火狐等主流浏览器

2024-07-17 12:25:54   220人阅读

 <!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>图片上传</title><script src="test.js" language="javascript"></script></head><body>     <input type="file" name="doc" id="doc" onchange="setImagePreview(‘doc‘,‘preview‘,‘localImag‘);"/>     <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div></body></html>
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 = http://www.mamicode.com/docObj.files[0].getAsDataURL();        //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式          imgObjPreview.src = http://www.mamicode.com/window.URL.createObjectURL(docObj.files[0]);    }else{        //IE下，使用滤镜        docObj.select();        var imgSrc =http://www.mamicode.com/ 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 =http://www.mamicode.com/ imgSrc;        }catch(e){            alert("您上传的图片格式不正确，请重新选择!");            return false;        }        imgObjPreview.style.display = ‘none‘;        document.selection.empty();    }    return true;}

 


联系
我们