input file實現多選，限制文件上傳類型，圖片上傳前預覽功能
阿新 • • 發佈：2018-06-29
ava eight tag HA ont accep 多選 red 異常
限制上傳類型 & 多選：
① accept 屬性只能與 <input type="file" /> 配合使用。它規定能夠通過文件上傳進行提交的文件類型。
② multiple 屬性規定輸入字段可選擇多個值。
示例：
<!-- image/* 所有圖片 image/png png圖片 image/jpg jpg圖片 image/gif gir動圖 application/msword Word文檔（.doc） application/vnd.openxmlformats-officedocument.wordprocessingml.document Word文檔（.docx） application/vnd.ms-excel Excel文檔（.xls） application/vnd.openxmlformats-officedocument.spreadsheetml.sheet Excel文檔（.xlsx） application/vnd.ms-powerpoint PPT文檔（.ppt） application/vnd.openxmlformats-officedocument.presentationml.presentation PPT文檔（.pptx） application/zip 壓縮文件 text/plain 文本文件 text/html HTML文件 text/css css文件 application/pdf pdf文件 audio/* 音頻文件 video/* 視頻文件--> <input id="files" type="file" accept="image/*, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/zip, text/plain, text/html, text/css, application/pdf, audio/*, video/*"multiple />
圖片上傳前預覽：示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="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: 100%; 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: 100; color: #333; display: flex; justify-content: center; align-items: center; cursor: pointer; } .form { display: none; } </style> </head> <body> <div class="tip"></div> <div class="main"> <div class="add">＋</div> <form class="form"></form> </div> </body> </html> <script type="text/javascript"> //判斷瀏覽器是否支持FileReader接口 if (typeof FileReader == ‘undefined‘) { $(".tip").html("<h1>當前瀏覽器不支持FileReader接口</h1>"); } var index = 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(); }); // 展示圖片 function showImg(el) { var reader = new FileReader(); //讀取文件過程方法 reader.onloadstart = function(e) { console.log("開始讀取...."); }; reader.onprogress = function(e) { console.log("正在讀取中...."); }; reader.onabort = function(e) { console.log("中斷讀取...."); }; reader.onerror = function(e) { console.log("讀取異常...."); }; reader.onload = function(e) { console.log("成功讀取...."); // console.log(e); var img = "<img class=‘img num" + index + "‘ width=‘100px‘ height=‘100px‘ onclick=‘del(" + index + ")‘ src=‘" + e.target.result + "‘ alt=‘‘>"; $(img).insertBefore(‘.add‘); }; reader.readAsDataURL(el.files[0]); $(el).removeAttr(‘id‘); } // 刪除圖片並刪除對應隱藏的input function del(cls){ $(".num" + cls).remove(); } </script>
註意：如果不選圖片，點取消的時候，上例中會有一個多余的input，表單提交的時候，記得把沒有值的 input 刪除掉。 input file實現多選，限制文件上傳類型，圖片上傳前預覽功能