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