限制上传类型 & 多选：

① 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. 【转】Js获取当前日期时间及其它操作

    Js获取当前日期时间及其它操作 原文地址:http://www.cnblogs.com/carekee/articles/1678041.html var myDate = new Date();my ...

  2. hadoop学习笔记（五）：HDFS Shell命令

    一.HDFS文件命令 以下是比较重要的一些命令: [root@master01 hadoop]# hadoop fs -ls / //查看根目录下的所有文件 [root@master01 hadoop ...

  3. 另一个SqlParameterCollection中已包含SqlParameter(转)

    一般情况下,我们定义的一个SqlParameter参数数组,如: SqlParameter[] parms =             {                new SqlParamete ...

  4. MyEclipse中更改JRE环境

    今天代码中需要用到λ表达式,但λ表达式需要JRE1.8的支持,而MyEclipse设置的默认JRE是1.7.为了是程序能够顺利通过编译,需要将MyEclipse的JRE由1.7转换为1.8.步骤如下:

  5. MySQL5：触发器

    什么是触发器 MySQL的触发器(trigger)和存储过程一样,都是嵌入到MySQL中的 一段程序.触发器是由事件来触发某个操作,这些事件包括INSERT.UPDATE和DELETE语句.如果定义了 ...

  6. javax.naming.NamingException: Cannot create resource instance报错修改

    //下面内容为网上获取 avax.naming.NamingException: Cannot create resource instance at org.apache.naming.factor ...

  7. JAVA 项目 调用外部的WebSerivce接口，入门实例 (一)

    前言: 第一次接触WebService,工作需要,调用外部的WebService接口,所以暂时我这里不考虑发布,做个记录,待以后回来可以看看,只是最初级的,所以有何不好.不对的地方,欢迎看到的同僚给予 ...

  8. SpringBoot(四) Core Features: Logging

    参考 文档: 26. Logging

  9. 在vue-cli中使用layer中的layData日期组件

    有朋友问我怎么在vue-cli项目中使用layui中的layData组件,有时间从网上查了下写下篇文章. 1.首先去layData官网把文件包下载下来,解压出来的laydate文件夹整个放在vue-c ...

  10. Spring Boot—18Redis

    pom.xml <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-ja ...