前天要做wap版的图片上传预览，找了好半天才找到比较适合的插件，我在该插件的基础上修改了一些东西，比如：上传后的图片删除后不能再添加、不能限制上传图片的数量。
input虽然有multiple（多选），但是android目前是不支持的。
该插件控制不了不能上传同一张图片，暂时没有思路解决这个问题(；′д｀)ゞ
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
8 <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
9 <title>多图片上传</title>
10
11 <style>
12 * {
13 margin: 0;
14 padding: 0;
15 }
16 /*图片上传*/
17
18 html,
19 body {
20 width: 100%;
21 height: 100%;
22 }
23
24 .container {
25 width: 100%;
26 height: 100%;
27 overflow: auto;
28 clear: both;
29 }
30
31 .z_photo {
32 width: 5rem;
33 height: 5rem;
34 padding: 0.3rem;
35 overflow: auto;
36 clear: both;
37 margin: 1rem auto;
38 border: 1px solid #555;
39 }
40
41 .z_photo img {
42 width: 1rem;
43 height: 1rem;
44 }
45
46 .z_addImg {
47 float: left;
48 margin-right: 0.2rem;
49 }
50
51 .z_file {
52 width: 1rem;
53 height: 1rem;
54 background: url(z_add.png) no-repeat;
55 background-size: 100% 100%;
56 float: left;
57 margin-right: 0.2rem;
58 }
59
60 .z_file input::-webkit-file-upload-button {
61 width: 1rem;
62 height: 1rem;
63 border: none;
64 position: absolute;
65 outline: 0;
66 opacity: 0;
67 }
68
69 .z_file input#file {
70 display: block;
71 width: auto;
72 border: 0;
73 vertical-align: middle;
74 }
75 /*遮罩层*/
76
77 .z_mask {
78 width: 100%;
79 height: 100%;
80 background: rgba(0, 0, 0, .5);
81 position: fixed;
82 top: 0;
83 left: 0;
84 z-index: 999;
85 display: none;
86 }
87
88 .z_alert {
89 width: 3rem;
90 height: 2rem;
91 border-radius: .2rem;
92 background: #fff;
93 font-size: .24rem;
94 text-align: center;
95 position: absolute;
96 left: 50%;
97 top: 50%;
98 margin-left: -1.5rem;
99 margin-top: -2rem;
100 }
101
102 .z_alert p:nth-child(1) {
103 line-height: 1.5rem;
104 }
105
106 .z_alert p:nth-child(2) span {
107 display: inline-block;
108 width: 49%;
109 height: .5rem;
110 line-height: .5rem;
111 float: left;
112 border-top: 1px solid #ddd;
113 }
114
115 .z_cancel {
116 border-right: 1px solid #ddd;
117 }
118 </style>
119 </head>
120
121 <body>
122
123 <div class="container">
124 <!-- 照片添加 -->
125 <div class="z_photo" id="z_photo">
126 <div class="z_file">
127 <input class="huodong-msg" type="file" name="file" id="file" value="" accept="image/jpg,image/jpeg,image/png" multiple onchange="imgChange(‘z_photo‘,‘z_file‘);" />
128 </div>
129 </div>
130
131 <!--遮罩层-->
132 <div class="z_mask">
133 <!--弹出框-->
134 <div class="z_alert">
135 <p>确定要删除这张图片吗？</p>
136 <p>
137 <span class="z_cancel">取消</span>
138 <span class="z_sure">确定</span>
139 </p>
140 </div>
141 </div>
142 </div>
143
144 <script type="text/javascript">
145 //px转换为rem
146 (function(doc, win) {
147 var docEl = doc.documentElement,
148 resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
149 recalc = function() {
150 var clientWidth = docEl.clientWidth;
151 if(!clientWidth) return;
152 if(clientWidth >= 640) {
153 docEl.style.fontSize = ‘100px‘;
154 } else {
155 docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px‘;
156 }
157 };
158
159 if(!doc.addEventListener) return;
160 win.addEventListener(resizeEvt, recalc, false);
161 doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
162 })(document, window);
163
164 function imgChange(obj1, obj2) {
165 var fileNum1 = 0;
166 var fileNum2 = event.target.files.length;
167 var a = document.getElementById("z_photo"),
168 b = a.getElementsByTagName("div");
169 fileNum1 = b.length;
170 var j = fileNum1 + fileNum2 - 1;
171 //上传图片个数限制
172 if(fileNum1 > 5 || j > 5) {
173 alert("最多只能上传5张图片！");
174 return;
175 }
176 //获取点击的文本框
177 var file = document.getElementById("file");
178 //存放图片的父级元素
179 var imgContainer = document.getElementsByClassName(obj1)[0];
180 //获取的图片文件
181 var fileList = file.files;
182 //文本框的父级元素
183 var input = document.getElementsByClassName(obj2)[0];
184 var imgArr = [];
185 //遍历获取到得图片文件
186 for(var i = 0; i < fileList.length; i++) {
187 var imgUrl = window.URL.createObjectURL(file.files[i]);
188 imgArr.push(imgUrl);
189 var img = document.createElement("img");
190 img.setAttribute("src", imgArr[i]);
191 var imgAdd = document.createElement("div");
192 var imgAddInput = document.createElement("input");
193 imgAddInput.setAttribute("type", "hidden");
194 imgAddInput.setAttribute("value", imgArr[i]);
195 imgAdd.appendChild(imgAddInput);
196 imgAdd.setAttribute("class", "z_addImg");
197 imgAdd.appendChild(img);
198 imgContainer.appendChild(imgAdd);
199
200 };
201 file.classList.add("z_cl");
202 imgRemove();
203 };
204
205 //删除图片
206 function imgRemove() {
207 var imgList = document.getElementsByClassName("z_addImg");
208 var mask = document.getElementsByClassName("z_mask")[0];
209 var cancel = document.getElementsByClassName("z_cancel")[0];
210 var sure = document.getElementsByClassName("z_sure")[0];
211 var file = document.getElementById("file");
212 for(var j = 0; j < imgList.length; j++) {
213 imgList[j].index = j;
214 imgList[j].onclick = function() {
215 var t = this;
216 mask.style.display = "block";
217 cancel.onclick = function() {
218 mask.style.display = "none";
219 };
220 sure.onclick = function() {
221 mask.style.display = "none";
222
223 if(file.classList.contains("z_cl")) {
224 file.outerHTML = file.outerHTML;
225 }
226
227 t.parentNode.removeChild(t);
228 file.classList.remove("z_cl");
229 };
230
231 }
232 };
233 };
234
235
236 </script>
237 </body>
238
239 </html>
( ?′ω`? )用到的图片
时间： 2024-09-29 04:33:02