您的位置:首页 > 其它

上传前实时图片预览

2015-08-09 01:06 218 查看
function setImagePreview() {

 var docObj=document.getElementById("bpic");

 var imgObjPreview=document.getElementById("preview");

 if(docObj.files && docObj.files[0]){

 //火狐下,直接设img属性

 imgObjPreview.style.display = 'block';

 imgObjPreview.style.width = '180px';

 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 = "250px";

 localImagId.style.height = "200px";

 //图片异常的捕捉,防止用户修改后缀来伪造图片

 try{

 localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

 locem("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

 }catch(e){

 alert("您上传的图片格式不正确,请重新选择!");

 return false;

 }

 imgObjPreview.style.display = 'none';

 document.selection.empty();

 }

 return true;

 }

 

 

<input type="file" name="bpic"  id="bpic" onchange="setImagePreview();"/>

<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none"  /></div><br/>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  图片 预览 上传