本地多图上传预览
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>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-07-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读