限制上传类型 & 多选：
① 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/vue@2.5.16/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‘);}// 删除图片并删除对应隐藏的inputfunction del(cls){ ???$(".num" + cls).remove();}</script>注意：如果不选图片，点取消的时候，上例中会有一个多余的input，表单提交的时候，记得把没有值的 input 删除掉。 input file实现多选，限制文件上传类型，图片上传前预览功能
原文地址：https://www.cnblogs.com/WEB-PHP/p/9228581.html