限制上传类型 & 多选:
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');
- }
- // 删除图片并删除对应隐藏的 input
- function del(cls){
- $(".num" + cls).remove();
- }
- </script>
注意: 如果不选图片, 点取消的时候, 上例中会有一个多余的 input, 表单提交的时候, 记得把没有值的 input 删除掉.
来源: http://www.bubuko.com/infodetail-2663625.html