限制上传类型 & 多选：

① 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. 在百度搜索里展现网站LOGO

    我们经常在百度搜索一些网站可以看到一个网站在百度上展示的三个部分: 网站的名称 如(趣学车) 网站的描述 一段比较详细的对网站的介绍 网站的logo,一张logo图片 如下图 ------ 接下来我们 ...

  2. 设计模式学习--面向对象的5条设计原则之Liskov替换原则--LSP

    一.LSP简介(LSP--Liskov Substitution Principle): 定义:如果对于类型S的每一个对象o1,都有一个类型T的对象o2,使对于任意用类型T定义的程序P,将o2替换为o ...

  3. javascript正则表达式获取控制

    正则表达式的元字符是包含特殊含义的字符,他们有一些特殊的功能,可以控制匹配模式的方式,反斜杠后的元字符将失去其特殊含义 单个字符 元字符 匹配情况 . 匹配除换行符外的任意字符 [a-z0-9] 匹配 ...

  4. 撩课-Web大前端每天5道面试题-Day17

    1.apply, call和bind有什么区别? 三者都可以把一个函数应用到其他对象上,注意不是自身对象． apply,call是直接执行函数调用,bind是绑定,执行需要再次调用． apply和ca ...

  5. 分享一个oracle 完整备份的批处理文件

    该批处理是基本可以无限针对使用window 服务器的oracle 备份,如下: set mydate=%DATE:~0,10% exp e_cards2016/e_cards2016@orcl ful ...

  6. 11招教你做好 ERP 系统维护

    ERP 维护的具体工作内容主要包括以下几个方面: 例行和突发事件的处理 以管理和技术的手段,维护和发展 ERP 运行环境,如平衡技术先进性/实用风险.目标/成本而进行的IT基础结构(服务器.网络.PC ...

  7. vue + skyline 搭建 一个开发环境

    1.之前用的是ext +  skyline搭建环境 ,正好最近是做前端的事情,有时间用vue + skyline 搭建一个三维场景 2.准备vue 2.x  ,UI 用的是iview 和element ...

  8. Listview点击已读使用getBadgeView标示

    重:每个ListItem是属于ListItem自己的,不能够放到ViewHolder中,而是数据源每项的. @Override public View getView(int position, Vi ...

  9. DROP语句总结

    一.基本语句 通过使用 DROP 语句,可以轻松地删除索引.表和数据库.  1.DROP INDEX 语句 DROP INDEX 语句用于删除表中的索引. <!--用于 MS Access 的 ...

  10. 线性代数的视角理解LSR(least square regression)的参数评估算法本质

    https://medium.com/@andrew.chamberlain/the-linear-algebra-view-of-least-squares-regression-f67044b7f ...