input file实现多选，限制文件上传类型，图片上传前预览功能
Posted web-php
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input file实现多选，限制文件上传类型，图片上传前预览功能相关的知识，希望对你有一定的参考价值。
限制上传类型 & 多选：
① 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实现多选，限制文件上传类型，图片上传前预览功能的主要内容，如果未能解决你的问题，请参考以下文章