js前端實現多圖圖片上傳預覽


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>測試頁面</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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM