代码如下
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 <title>多图片上传</title> 9 10 <style> 11 * { 12 margin: 0; 13 padding: 0; 14 } 15 /*图片上传*/ 16 17 html, 18 body { 19 width: 100%; 20 height: 100%; 21 } 22 23 .container { 24 width: 100%; 25 height: 100%; 26 overflow: auto; 27 clear: both; 28 } 29 30 .z_photo { 31 width: 5rem; 32 height: 5rem; 33 padding: 0.3rem; 34 overflow: auto; 35 clear: both; 36 margin: 1rem auto; 37 border: 1px solid #555; 38 } 39 40 .z_photo img { 41 width: 1rem; 42 height: 1rem; 43 } 44 45 .z_addImg { 46 float: left; 47 margin-right: 0.2rem; 48 } 49 50 .z_file { 51 width: 1rem; 52 height: 1rem; 53 background: url(z_add.png) no-repeat; 54 background-size: 100% 100%; 55 float: left; 56 margin-right: 0.2rem; 57 } 58 59 .z_file input::-webkit-file-upload-button { 60 width: 1rem; 61 height: 1rem; 62 border: none; 63 position: absolute; 64 outline: 0; 65 opacity: 0; 66 } 67 68 .z_file input#file { 69 display: block; 70 width: auto; 71 border: 0; 72 vertical-align: middle; 73 } 74 /*遮罩层*/ 75 76 .z_mask { 77 width: 100%; 78 height: 100%; 79 background: rgba(0, 0, 0, .5); 80 position: fixed; 81 top: 0; 82 left: 0; 83 z-index: 999; 84 display: none; 85 } 86 87 .z_alert { 88 width: 3rem; 89 height: 2rem; 90 border-radius: .2rem; 91 background: #fff; 92 font-size: .24rem; 93 text-align: center; 94 position: absolute; 95 left: 50%; 96 top: 50%; 97 margin-left: -1.5rem; 98 margin-top: -2rem; 99 } 100 101 .z_alert p:nth-child(1) { 102 line-height: 1.5rem; 103 } 104 105 .z_alert p:nth-child(2) span { 106 display: inline-block; 107 width: 49%; 108 height: .5rem; 109 line-height: .5rem; 110 float: left; 111 border-top: 1px solid #ddd; 112 } 113 114 .z_cancel { 115 border-right: 1px solid #ddd; 116 } 117 118 </style> 119</head> 120 121<body> 122 123 <div class="container"> 124 <!-- 照片添加 --> 125 <div class="z_photo"> 126 <div class="z_file"> 127 <input type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" /> 128 129 </div> 130 131 </div> 132 133 <!--遮罩层--> 134 <div class="z_mask"> 135 <!--弹出框--> 136 <div class="z_alert"> 137 <p>确定要删除这张图片吗？</p> 138 <p> 139 <span class="z_cancel">取消</span> 140 <span class="z_sure">确定</span> 141 </p> 142 </div> 143 </div> 144 </div> 145 146 147 <script type="text/javascript"> 148 //px转换为rem 149 (function(doc, win) { 150 var docEl = doc.documentElement, 151 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 152 recalc = function() { 153 var clientWidth = docEl.clientWidth; 154 if (!clientWidth) return; 155 if (clientWidth >= 640) { 156 docEl.style.fontSize = '100px'; 157 } else { 158 docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; 159 } 160 }; 161 162 if (!doc.addEventListener) return; 163 win.addEventListener(resizeEvt, recalc, false); 164 doc.addEventListener('DOMContentLoaded', recalc, false); 165 })(document, window); 166 167 function imgChange(obj1, obj2) { 168 //获取点击的文本框 169 var file = document.getElementById("file"); 170 //存放图片的父级元素 171 var imgContainer = document.getElementsByClassName(obj1)[0]; 172 //获取的图片文件 173 var fileList = file.files; 174 175 //文本框的父级元素 176 var input = document.getElementsByClassName(obj2)[0]; 177 var imgArr = []; 178 //遍历获取到得图片文件 179 for (var i = 0; i < fileList.length; i++) { 180 var imgUrl = window.URL.createObjectURL(file.files[i]); 181 imgArr.push(imgUrl); 182 var img = document.createElement("img"); 183 img.setAttribute("src", imgArr[i]); 184 var imgAdd = document.createElement("div"); 185 imgAdd.setAttribute("class", "z_addImg"); 186 imgAdd.appendChild(img); 187 imgContainer.appendChild(imgAdd); 188 }; 189 imgRemove(); 190 }; 191 192 function imgRemove() { 193 var imgList = document.getElementsByClassName("z_addImg"); 194 var mask = document.getElementsByClassName("z_mask")[0]; 195 var cancel = document.getElementsByClassName("z_cancel")[0]; 196 var sure = document.getElementsByClassName("z_sure")[0]; 197 for (var j = 0; j < imgList.length; j++) { 198 imgList[j].index = j; 199 imgList[j].onclick = function() { 200 var t = this; 201 mask.style.display = "block"; 202 cancel.onclick = function() { 203 mask.style.display = "none"; 204 }; 205 sure.onclick = function() { 206 mask.style.display = "none"; 207 t.style.display = "none"; 208 //$(t).remove();//引用了Jquery才能这样使用 209 }; 210 211 } 212 }; 213 }; 214 215 </script> 216</body> 217 218</html>
这是效果图：
这个配合base64转码图片使用代码如下：不过不能无限制上传图片哈，我这里限制了只能上传5张图片
1<!DOCTYPE html> 2 3<html lang="en"> 4<head runat="server"> 5 <meta charset="utf-8" /> 6 <meta name="renderer" content="webkit|ie-comp|ie-stand" /> 7 <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no" /> 8 <meta name="keywords" content="" /> 9 <meta name="description" content="" /> 10 <title></title> 11 <link href="../service/css/bootstrap.min.css" rel="stylesheet" /> 12 <script src="scripts/Base64Img.js" type="text/javascript"></script> 13 <script type="text/javascript" src="../service/scripts/jquery-2.1.4.min.js"></script> 14 <style type="text/css"> 15 * { 16 margin: 0; 17 padding: 0; 18 } 19 /*图片上传*/ 20 21 html, 22 body { 23 width: 100%; 24 height: 100%; 25 } 26 27 .container { 28 width: 100%; 29 height: 100%; 30 overflow: auto; 31 clear: both; 32 } 33 34 .z_photo { 35 width: 100%; 36 height: 5rem; 37 padding: 0.3rem; 38 overflow: auto; 39 clear: both; 40 border: 1px dashed #ddd; 41 } 42 43 .z_photo img { 44 width: 1rem; 45 height: 1rem; 46 } 47 48 .z_addImg { 49 float: left; 50 margin-right: 0.2rem; 51 margin-bottom: 0.2rem; 52 } 53 54 .z_file { 55 width: 1rem; 56 height: 1rem; 57 background: url(/images/z_add.png) no-repeat; 58 background-size: 100% 100%; 59 float: left; 60 margin-right: 0.2rem; 61 } 62 63 .z_file input::-webkit-file-upload-button { 64 width: 1rem; 65 height: 1rem; 66 border: none; 67 position: absolute; 68 outline: 0; 69 opacity: 0; 70 } 71 72 .z_file input#file { 73 display: block; 74 width: auto; 75 border: 0; 76 vertical-align: middle; 77 } 78 /*遮罩层*/ 79 80 .z_mask { 81 width: 100%; 82 height: 100%; 83 background: rgba(0, 0, 0, .5); 84 position: fixed; 85 top: 0; 86 left: 0; 87 z-index: 999; 88 display: none; 89 } 90 91 .z_alert { 92 width: 3rem; 93 height: 2rem; 94 border-radius: .2rem; 95 background: #fff; 96 font-size: .24rem; 97 text-align: center; 98 position: absolute; 99 left: 50%; 100 top: 50%; 101 margin-left: -1.5rem; 102 margin-top: -2rem; 103 } 104 105 .z_alert p:nth-child(1) { 106 line-height: 1.5rem; 107 } 108 109 .z_alert p:nth-child(2) span { 110 display: inline-block; 111 width: 49%; 112 height: .5rem; 113 line-height: .5rem; 114 float: left; 115 border-top: 1px solid #ddd; 116 } 117 118 .z_cancel { 119 border-right: 1px solid #ddd; 120 } 121 </style> 122</head> 123<body class="bg-fff"> 124 <form id="form1" runat="server"> 125 <div class="section" id="container"> 126 <div id="head" class="section"> 127 <div class="section header"> 128 <h1>订单评价</h1> 129 <a href="javascript:void(0);" class="back-btn"> 130 <img src="images/back.png" /></a> 131 <!-- 跳转到会员 --> 132 <a href="javascript:void(0);" class="head-icon" id="inMember"> 133 <img src="images/member.png" /></a> 134 </div> 135 </div> 136 <div id="content" class="section"> 137 <div class="section evaluate-box"> 138 <div class="section evaluate-head"> 139 140 <h3>商品评价：</h3> 141 <!-- 评价的星级可通过e-star属性获取 --> 142 <!-- 提交的时候向后台传递e-star的属性值就是星级数 --> 143 <div class="f-left evaluate-star" e-star="0" id="spgoodsLevel"> 144 <span> 145 <img src="images/star_b.png"></span> 146 <span> 147 <img src="images/star_b.png"></span> 148 <span> 149 <img src="images/star_b.png"></span> 150 <span> 151 <img src="images/star_b.png"></span> 152 <span> 153 <img src="images/star_b.png"></span> 154 </div> 155 </div> 156 <div class="section evaluate-txt"> 157 <textarea placeholder="商品评价？质量、安全等评价" rows="5" id="txtgoodsComment"></textarea> 158 </div> 159 </div> 160 <div class="section evaluate-box"> 161 <div class="section evaluate-head"> 162 <h3>图片上传：<span style="color: rgba(0, 0, 0, .5);">最多只能传5张</span></h3> 163 </div> 164 </div> 165 <div> 166 <div class="container"> 167 <!-- 照片添加 --> 168 <div class="z_photo"> 169 <div class="z_file"> 170 <input type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" /> 171 172 <div class="hidden"> 173 <div class="span" id="update_file_label"></div> 174 <input type="hidden" id="base64_output1" /> 175 <input type="hidden" id="base64_output2" /> 176 <input type="hidden" id="base64_output3" /> 177 <input type="hidden" id="base64_output4" /> 178 <input type="hidden" id="base64_output5" /> 179 <div class="strong red" id="img_size"></div> 180 <img id="img_prev" src="../images/member/nophoto.gif" style="max-width: 100%; border: 1px solid gray;"> 181 </div> 182 </div> 183 </div> 184 <!--遮罩层--> 185 <div class="z_mask"> 186 <!--弹出框--> 187 <div class="z_alert"> 188 <p style="display: block;">确定要删除这张图片吗？</p> 189 <p style="display: block;"> 190 <span class="z_cancel">取消</span> 191 <span class="z_sure">确定</span> 192 </p> 193 </div> 194 </div> 195 </div> 196 197 <script type="text/javascript"> 198 //px转换为rem 199 (function (doc, win) { 200 var docEl = doc.documentElement, 201 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 202 recalc = function () { 203 var clientWidth = docEl.clientWidth; 204 if (!clientWidth) return; 205 if (clientWidth >= 640) { 206 docEl.style.fontSize = '100px'; 207 } else { 208 docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; 209 } 210 }; 211 212 if (!doc.addEventListener) return; 213 win.addEventListener(resizeEvt, recalc, false); 214 doc.addEventListener('DOMContentLoaded', recalc, false); 215 })(document, window); 216 217 function imgChange(obj1, obj2) { 218 219 var imgCount = ($(".z_addImg").length + 1); 220 if (imgCount <= 5) { 221 var _baseImgSrc = "base64_output" + imgCount; 222 //获取点击的文本框 223 var file = document.getElementById("file"); 224 //存放图片的父级元素 225 var imgContainer = document.getElementsByClassName(obj1)[0]; 226 //获取的图片文件 227 var fileList = file.files; 228 229 //文本框的父级元素 230 var input = document.getElementsByClassName(obj2)[0]; 231 var imgArr = []; 232 //遍历获取到得图片文件 233 for (var i = 0; i < fileList.length; i++) { 234 var imgUrl = window.URL.createObjectURL(file.files[i]); 235 imgArr.push(imgUrl); 236 var img = document.createElement("img"); 237 img.setAttribute("src", imgArr[i]); 238 var imgAdd = document.createElement("div"); 239 imgAdd.setAttribute("class", "z_addImg"); 240 imgAdd.appendChild(img); 241 imgContainer.appendChild(imgAdd); 242 }; 243 imgRemove(); 244 console.log(_baseImgSrc); 245 $("#update_file_label").html(this.value); 246 gen_base64(_baseImgSrc, 'img_size', 'img_prev', 'file'); 247 } 248 else { 249 alert("上传图片不能超过5张"); 250 } 251 252 }; 253 254 function imgRemove() { 255 var imgList = document.getElementsByClassName("z_addImg"); 256 var mask = document.getElementsByClassName("z_mask")[0]; 257 var cancel = document.getElementsByClassName("z_cancel")[0]; 258 var sure = document.getElementsByClassName("z_sure")[0]; 259 for (var j = 0; j < imgList.length; j++) { 260 imgList[j].index = j; 261 imgList[j].onclick = function () { 262 var t = this; 263 mask.style.display = "block"; 264 cancel.onclick = function () { 265 mask.style.display = "none"; 266 }; 267 sure.onclick = function () { 268 mask.style.display = "none"; 269 $(t).remove(); 270 //t.style.display = "none"; 271 }; 272 273 } 274 }; 275 }; 276 277 </script> 278 </div> 279 </div> 280 </div> 281 <input id="txtOrderID" type="hidden" runat="server" /> 282 <input id="txtMemID" type="hidden" runat="server" /> 283 </form> 284</body> 285</html> 286 287Base64Img.js的代码： 288 289function $_(id) { 290 return document.getElementById(id); 291} 292/*把图片转成Base64码 293@param 参数说明： 294codeInput:把转好的Base64码存放在哪个控件中 295imgSize:图片的大小（单位是KB） 296imgSrc:点击上传后图片的显示的标签 297fileInputId:上传控件的ID 298*/ 299function gen_base64(codeInput, imgSize, imgSrc, fileInputId) { 300 $_(codeInput).value = ''; 301 $_(imgSize).innerHTML = ''; 302 $_(imgSrc).src = '../images/member/nophoto.gif'; 303 var file = $_(fileInputId).files[0]; 304 if (!/image\/\w+/.test(file.type)) { 305 alert("请确保文件为图像类型"); 306 return false; 307 } 308 r = new FileReader(); //本地预览 309 r.onload = function () { 310 $_(codeInput).value = r.result; 311 $_(imgSrc).src = r.result; 312 //$("#img_prev").attr("src", r.result); 313 //$("#img_prev").css("width", "50%"); 314 $_(imgSize).innerHTML = " 图片大小：" + Math.round(r.result.length / 1024 * 1000) / 1000 + " KB"; 315 } 316 r.readAsDataURL(file); 317}