类微信多图片上传

http://runjs.cn/detail/pg5lb02k

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类微信多图片上传</title> <style type="text/css"> /*rest style*/ body { padding: 0; margin: 0; background-color: #f4f4f4; max-width: 640px; margin: 0 auto; } p { padding: 0; margin: 0; } ul, li { padding: 0; margin: 0; list-style: none; } a { text-decoration: none; color: #525252; } img { vertical-align: middle; } input, button { outline: none; background: none; border: none; } .fl { float: left; } .fr { float: right; } .clear::after { display: block; content: ""; clear: both; } /*page style*/ .infoEdt { background-color: #fff; padding: 0 2%; margin-bottom: 6px; } .imgUps section { background-color: #fff; padding: 2% 1% 6%; width: 98%; } .imgUps p { padding: 0 2%; line-height: 40px; background-color: #fff; } .infoEdt div { font-size: 14px; line-height: 45px; color: #000; border-bottom: 1px solid #dfdfdf } .infoEdt input { line-height: 45px; text-align: right } .imgUps span { font-size: 15px; color: #000; } .imgUps form div { position: relative; width: 0; height: 0; background-color: #f3f3f3; padding: 12%; margin: 1% .5%; float: left; background-size: 100% auto; background-position: center center; background-repeat: no-repeat } .imgUps form div>em { display: block; position: absolute; border-radius: 50%; height: 26px; width: 26px; font-style: normal; color: #fff; line-height: 30px; text-align: center; top: 0; right: 0; background-color: #f3557b; background-image: url('http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/loginBack.png'); background-size: 47% auto; background-position: center center; background-repeat: no-repeat } #addPic { display: block; height: 0; width: 0; padding: 12%; margin: 1% .5%; float: left; background-image: url('http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/addPic.png'); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat } .upsBtn { display: block; background-image: linear-gradient(-132deg, #f3557b 0%, #fa7157 100%); border-radius: 9px; width: 92%; text-align: center; margin: 6% 4%; line-height: 45px; font-size: 18px; color: #ffffff; } </style> </head> <body> <div class="infoEdt"> <div class="clear"> <label class="fl">姓名</label><input type="text" class="fr" placeholder="冯燕"> </div> <div class="clear" style="border:none"> <label class="fl">联系方式</label><input type="text" class="fr" placeholder="135662454777"> </div> </div> <div class="imgUps"> <p class="clear"> <span class="fl">图片上传</span><span class="fr" style="color:#999">最多上传10张图</span> </p> <form id="formImg"> <section id="divElesWrp" class="clear"> <a id="addPic" class="fl" href="javascript:;"></a> </section> <a class="upsBtn" href="javascript:;" id="bmBtn">确认报名</a> </form> </div> </body>  <script type="text/javascript"> var oUpBtn = document.getElementById("addPic"); var oform = document.getElementById("formImg"); var odWrp = document.getElementById("divElesWrp"); var obmBtn = document.getElementById("bmBtn") var i = 0; function imgChange(ths) { var oinpt = ths; var freader = new FileReader(); var ofile = oinpt.files[0]; if (ofile) { freader.readAsDataURL(ofile); freader.onload = function() { var newNode = document.createElement("div"); var spanEm = document.createElement("em"); spanEm.setAttribute("onclick", "delBoth(this)") newNode.appendChild(spanEm); newNode.setAttribute("id", oinpt.id + "d"); odWrp.insertBefore(newNode, oUpBtn); newNode.style.backgroundImage = "url(" + this.result + ")"; } } } function delBoth(ths) { var oEm = ths; var strs = oEm.parentNode.getAttribute("id"); var newStrs = strs.substring(0, strs.length - 1); odWrp.removeChild(oEm.parentNode); oform.removeChild(document.getElementById(newStrs)); } function clearEnpt(oinpt) { if (oinpt.value == "") { oform.removeChild(oinpt); } } oUpBtn.onclick = function() { var mInputs = oform.getElementsByTagName("input"); var eleInpt = document.createElement("input"); eleInpt.type = "file"; eleInpt.id = "file" + i; eleInpt.name = "imgs" + i; // eleInpt.setAttribute("hidden", "hidden"); eleInpt.setAttribute("onchange", "imgChange(this)"); oform.appendChild(eleInpt); i++; for (var j = 0; j < mInputs.length - 1; j++) { clearEnpt(mInputs[j]) } setTimeout(function() { eleInpt.click(); }, 200); } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 类微信多图片上传