限制上传类型 & 多选：

① 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: ;

        padding: ;

    }

    .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 #;

        box-sizing: border-box;

        font-size: 100px;

        line-height: 100px;

        font-weight: ;

        color: #;

        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 = ;

$(".add").click(function(e) {

    if (!$("#upload")[]) {

        $(".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[]);

    $(el).removeAttr('id');

}

// 删除图片并删除对应隐藏的input

function del(cls){

    $(".num" + cls).remove();

}

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

input file实现多选，限制文件上传类型，图片上传前预览功能的更多相关文章

  1. Django文件上传三种方式以及简单预览功能

    主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码 <!DOCTYPE html> <html lang="en"> ...

  2. 使用input选择本地图片，并且实现预览功能

    1.使用input标签选择本地图片文件 用一个盒子来存放预览的图片 2.JS实现预览 首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 UR ...

  3. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. 一、简单的图片上传并预览功能input[file]

    一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  6. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0

    实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...

  9. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

随机推荐

  1. MySQL常用命令操作

    1. 命令行登录使用默认3306端口的MySQL: mysql -u root -p 2. 通过TCP连接管理不同端口的多个MySQL(注意:MySQL4.1以上版本才有此项功能): mysql -u ...

  2. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

  3. MFC数据库操作

    本例采用Microsoft SQL2008建立的一个数据库表 /****链接数据库操作**/ 在stdafx.h的头文件中加入 #import "C:\Program Files\Commo ...

  4. C#截取字符串（转载）

    来源:https://www.cnblogs.com/lykbk/archive/2012/06/28/lyk1232132.html C#截取字符串 一. 1.取字符串的前i个字符 (1)strin ...

  5. Apache Spark Exception in thread “main” java.lang.NoClassDefFoundError: scala/collection/GenTraversableOnce$class

    问题: 今天用Maven搭建了一个Spark的Scala项目,运行后遇到下面异常: Apache Spark Exception in thread “main” java.lang.NoClassD ...

  6. NSDictionary 和NSArray 排序（sort）

    排序: NSMutableDictionary *dic=[[NSMutableDictionary alloc]init]; [dic setValue:@"第3个" forKe ...

  7. struts2 上传下载文件，异常处理，数据类型转换

    一,web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=" ...

  8. 用Jquery去写树结构

    <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>Tr ...

  9. CSS3入门学习之属性大全手册

    CSS Level 2 经历了 9 年的时间(从 2002 年 8 月到 2011 年 6 月)才达到 Recommendation(推荐) 状态.主要的原因是被一些 secondary featur ...

  10. CentOS 7 防火墙端口配置

    CentOS 7 防火墙端口配置查看防火墙是否开启systemctl status firewalld 若没有开启则开启systemctl start firewalld 查看所有开启的端口firew ...