本地多图上传预览

最新推荐文章于 2021-06-04 13:24:01 发布

weixin_34006468

最新推荐文章于 2021-06-04 13:24:01 发布

阅读量64

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/658349

版权

  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>

GitHub： Fuck me on GitHub

留下你的足迹求推荐呦

weixin_34006468

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地多图上传预览

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-w...
复制链接

扫一扫