如何使用file標簽實現多圖文件上傳預覽

這篇文章主要介紹如何使用file標簽實現多圖文件上傳預覽，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

js 代碼：

<script> 
 //下面用于多圖片上傳預覽功能
 function setImagePreviews(avalue) {
 var docObj = document.getElementById("files");
 var dd = document.getElementById("preview");
 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 = '70px';
 imgObjPreview.style.height = '70px';
 //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 = "70px";
 localImagId.style.height = "70px";
 //圖片異常的捕捉，防止用戶修改后綴來偽造圖片
 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>

HTML代碼：

<form method="post" enctype="multipart/form-data"> 
 <input type="file" accept="image/png,image/gif,image/jpg,image/jpeg" id="files" name="files" multiple onchange="javascript:setImagePreviews();" />
 <input type="button" id="upload" value="上傳" />
 <div id="preview"> 
 </div> 
</form>

以上是“如何使用file標簽實現多圖文件上傳預覽”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！