您现在的位置是：首页 > 文章详情

本地多图上传预览

日期：2018-07-14点击：417收藏

 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>