Input file to implement multiple selections, limit the type of files upload, image pre-upload preview function

限制上传类型 & 多选：

属性只能与 <input type="file" /> 配合使用。它规定能够通过文件上传进行提交的文件类型。② multiple 属性规定输入字段可选择多个值。

示例：

<!--image/* All pictures image/png png pictures image/jpg jpg images image/gif gir motion diagram Application/msword W Ord document (. doc) application/vnd.openxmlformats-officedocument.wordprocessingml.document Word document (. docx) Applicatio      N/vnd.ms-excel Excel document (. xls) application/vnd.openxmlformats-officedocument.spreadsheetml.sheet Excel document (. xlsx) Application/vnd.ms-powerpoint ppt document (. ppt) Application/vnd.openxmlformats-officedocument.presentationml.presentat      Ion ppt document (. pptx) Application/zip compressed file text/plain text file text/html html file text/css css file Application/pdf PDF file audio/* audio file video/* video file -  <inputID= "Files"type= "File"Accept= "image/*, Application/msword, Application/vnd.openxmlformats-officedocument.wordpro Cessingml.document, Application/vnd.ms-excel, Application/vnd.openxmlformats-officedocum Ent.spreadsheetml.sheet, Application/vnd.ms-powerpoint, Application/vnd.openxmlformats-o                  Fficedocument.presentationml.presentation, Application/zip, Text/plain, text/html, Text/css, Application/pdf, audio/*, video/* "multiple/>

图片上传前预览：

示例：

<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <script type="Text/javascript"Src="Https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <!--<script src="Https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <style type="Text/css">html, body {margin:0; padding:0; }. Tip {width: -%; Text-Align:center; }. main {box-sizing:border-box;        Display:flex; Flex-Wrap:wrap; Justify-content:flex-start; Align-Items:center;        border:2px dotted red;    padding:20px;        }. add {width:100px;        height:100px; border:2px Solid #333; Box-sizing:border-box; Font-size:100px; Line-height:100px; Font-weight: -; Color: #333;        Display:flex; Justify-Content:center; Align-Items:center;    Cursor:pointer;    }. form {display:none; }    </style>class="Tip"></div> <divclass="Main"> <divclass="Add">+</div> <formclass="form"></form> </div></body>"Text/javascript">//determine if the browser supports the FileReader interfaceif(typeofFileReader = ='undefined') {    $(". Tip"). HTML ("");}varindex =0;$(". Add"). Click (function (e) {if(!$("#upload")[0]) {        $(". Form"). Append ("<input id= ' upload ' class= ' num"+ (++index) +"' onchange= ' showimg (this) ' type= ' file ' accept= ' image/* '/>"); }    $("#upload"). Click ();});//Show Picturesfunction Showimg (EL) {varReader =NewFileReader (); //read File procedure methodReader.onloadstart =function (e) {Console.log ("start reading ....");    }; Reader.onprogress=function (e) {Console.log ("reading in progress ....");    }; Reader.onabort=function (e) {Console.log ("interrupt read ....");    }; Reader.onerror=function (e) {Console.log ("Read exception ....");    }; Reader.onload=function (e) {Console.log ("successfully read ...."); //Console.log (e);        varIMG =""+ Index +"' width= ' 100px ' height= ' 100px ' onclick= ' del ("+ Index +") ' src= '"+ E.target.result +"' alt= ' >"; $ (IMG). InsertBefore ('. Add');    }; Reader.readasdataurl (el.files[0]); $ (EL). Removeattr ('ID');}//Delete the image and delete the corresponding hidden inputfunction del (CLS) {$ (". Num"+cls). Remove ();</script>

注意：如果不选图片，点取消的时候，上例中会有一个多余的input，表单提交的时候，记得把没有值的 input 删除掉。

Input file to implement multiple selections, limit the type of files upload, image pre-upload preview function