码迷,mamicode.com
首页 > Web开发 > 详细

jq 实现照片上传回显(支持火狐和高版本IE,谷歌反应慢,有大神可以补充)

时间:2017-08-04 12:46:18      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:gid   put   防止   script   rip   图片   data   asc   orm   

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>By:德马{这是一个好心人}</title>

<script type="text/javascript">

//下面用于多图片上传预览功能

function setImagePreviews(avalue) {

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

var dd = document.getElementById("dd");

dd.innerHTML = "";

var fileList = docObj.files;

for (var i = 0; i < fileList.length; i++) {

 

dd.innerHTML += "<div style=‘float:left‘ > <img id=‘img" + i + "‘ /> </div>";

var imgObjPreview = document.getElementById("img"+i);

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

//火狐下,直接设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[i]);

}

else {

//IE下,使用滤镜

docObj.select();

var imgSrc = document.selection.createRange().text;

alert(imgSrc)

var localImagId = document.getElementById("img" + i);

//必须设置初始大小

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>

<div style="margin :0px auto; width:990px;">

<input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" />

<div id="dd" style=" width:990px;"></div>

 

</div>

</body>

</html>

jq 实现照片上传回显(支持火狐和高版本IE,谷歌反应慢,有大神可以补充)

标签:gid   put   防止   script   rip   图片   data   asc   orm   

原文地址:http://www.cnblogs.com/chenyufu/p/7284291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!