本地多图上传预览
Posted lprosper
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了本地多图上传预览相关的知识，希望对你有一定的参考价值。
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>
以上是关于本地多图上传预览的主要内容，如果未能解决你的问题，请参考以下文章