?1 <!doctype html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<meta name="viewport" ?6 ??????????content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ?7 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?8 ????<title>本地单图上传预览</title> ?9 </head> 10 <body> 11 ?12 <input type="file" name="" id="imgUpBtn" multiple onchange="javascript:setImagePreviews()"> 13 <div id="addPictures"></div> 14 ?15 ?16 <script type="text/javascript"> 17 ????function setImagePreviews() { 18 ????????var fileUp = document.getElementById("imgUpBtn"); 19 ????????var addImgs = document.getElementById("addPictures"); 20 ????????addImgs.innerHTML = ""; 21 ????????var fileList = fileUp.files; 22 ????????for (var i = 0; i < fileList.length; i++) { 23 ????????????addImgs.innerHTML += "<img id=‘img" + i + "‘ ?/>"; 24 ????????????var imgObjPreview = document.getElementById("img" + i); 25 ????????????imgObjPreview.style.width = ‘150px‘; 26 ????????????imgObjPreview.style.height = ‘150px‘; 27 ????????????imgObjPreview.src = window.URL.createObjectURL(fileUp.files[i]); 28 ????????} 29 ????} 30 </script> 31 ?32 ?33 <!--<script type="text/javascript">--> 34 ?35 ????<!--//下面用于多图片上传预览功能--> 36 ?37 ????<!--function setImagePreviews() {--> 38 ?39 ????????<!--// 上传按钮--> 40 ????????<!--var fileUp = document.getElementById("imgUpBtn");--> 41 ?42 ????????<!--// 获取需要添加图片的父元素--> 43 ????????<!--var addImgs = document.getElementById("addPictures");--> 44 ?45 ????????<!--// 每次调用时令元素内内容为空--> 46 ????????<!--addImgs.innerHTML = "";--> 47 ?48 ????????<!--// 图片地址类数组--> 49 ????????<!--var fileList = fileUp.files;--> 50 ?51 ????????<!--// 循环类数组--> 52 ????????<!--for (var i = 0; i < fileList.length; i++) {--> 53 ?54 ????????????<!--// 向元素内添加图片标签--> 55 ????????????<!--addImgs.innerHTML += "<img id=‘img" + i + "‘ ?/>";--> 56 ?57 ????????????<!--// 获取图片id，每次循环赋值给imgObjPreview的id都不同--> 58 ????????????<!--var imgObjPreview = document.getElementById("img" + i);--> 59 ?60 ????????????<!--// 判断--> 61 ????????????<!--if (fileUp.files && fileUp.files[i]) {--> 62 ?63 ????????????????<!--//火狐下，直接设img属性--> 64 ?65 ????????????????<!--imgObjPreview.style.width = ‘150px‘;--> 66 ?67 ????????????????<!--imgObjPreview.style.height = ‘150px‘;--> 68 ?69 ????????????????<!--// 每次循环都向图片标签添加路径--> 70 ????????????????<!--imgObjPreview.src = window.URL.createObjectURL(fileUp.files[i]);--> 71 ?72 ????????????<!--}--> 73 ?74 ????????????<!--else {--> 75 ?76 ????????????????<!--//IE下，使用滤镜--> 77 ?78 ????????????????<!--fileUp.select();--> 79 ?80 ????????????????<!--var imgSrc = document.selection.createRange().text;--> 81 ?82 ????????????????<!--alert(imgSrc)--> 83 ?84 ????????????????<!--var localImgId = document.getElementById("img" + i);--> 85 ?86 ????????????????<!--//必须设置初始大小--> 87 ?88 ????????????????<!--localImgId.style.width = "150px";--> 89 ?90 ????????????????<!--localImgId.style.height = "150px";--> 91 ?92 ????????????????<!--//图片异常的捕捉，防止用户修改后缀来伪造图片--> 93 ?94 ????????????????<!--try {--> 95 ?96 ????????????????????<!--localImgId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";--> 97 ?98 ????????????????????<!--localImgId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;--> 99 100 ????????????????<!--}-->101 102 ????????????????<!--catch (e) {-->103 104 ????????????????????<!--alert("您上传的图片格式不正确，请重新选择!");-->105 106 ????????????????????<!--return false;-->107 108 ????????????????<!--}-->109 110 ????????????????<!--imgObjPreview.style.display = ‘none‘;-->111 112 ????????????????<!--document.selection.empty();-->113 114 ????????????<!--}-->115 116 ????????<!--}-->117 118 ????????<!--return true;-->119 120 ????<!--}-->121 122 <!--</script>-->123 </body>124 </html>本地多图上传预览
原文地址：https://www.cnblogs.com/lprosper/p/9313477.html