input标签中的type属性支持很多不同的类型如text，password，money等，在很早之前对上传文件的功能做过一次尝试，后来给忘记了，前几天被难为了一次翻翻找找找到了之前写过的一个小demo放上来免得又忘掉。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ display: flex; list-style: none; } li{ position: relative; margin: 10px; height: 200px; } .cover{ position: absolute; height: 100%; width: 100%; background: #111; opacity: 0.5; bottom: 0; } span{ display: inline-block; width: 180px; font-size: 150px; line-height: 180px; text-align: center; border: 10px saddlebrown solid; } #add{ margin: 10px; position: relative; } input{ position: absolute; display: inline-block; width: 200px; height: 200px; top: 0; left: 0; opacity: 0; } img{ height: 200px; } #box{ } #body{ display: flex; } </style> </head> <body> <div id="body"> <ul id="box"> </ul> <div id="add"> <span> + </span> <input type="file" name="" id="fs" multiple="multiple" value="" /> </div> </div> <script type="text/javascript"> fs.onchange=function (e) { let info=e.target.files let peg=/^image// for (let i=0 ;i<info.length;i++) { if (peg.test(info[i].type)==false){ alert("不是图片形式文件无法上传") continue } let readfs=new FileReader() readfs.readAsDataURL(info[i]) readfs.onload=function(){ let img = new Image img.src=readfs.result let li=document.createElement("li") let coverDiv=document.createElement("div") coverDiv.setAttribute("class","cover") li.appendChild(coverDiv) li.appendChild(img) box.appendChild(li) let xhr=new XMLHttpRequest xhr.open("POST","/upload",true) xhr.upload.onprogress=function (e) { var b=(e.loaded/e.total)*100 coverDiv.style.height=(100-b)+"%" li.style.border="cornflowerblue solid 2px" } xhr.onload=function () { if (xhr.status==200) { console.log(xhr.responseText) } } let data =new FormData data.append("abc",info[i]) xhr.send(data) } } } </script> </body> </html>
页面效果也一起放上来吧
