限制上传类型 & 多选：

① 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. 求最短路径的三种算法: Ford, Dijkstra和Floyd

    Bellman-Ford算法 Bellman-Ford是一种容易理解的单源最短路径算法, Bellman-Ford算法需要两个数组进行辅助: dis[i]: 存储顶点i到源点已知最短路径 path[i ...

  2. MySql社区版和企业版的区别

    1.社区版的免费,出问题MySql公司概不负责,是企业版的测试版,功能却没有企业版功能完善. 2.企业版的收费,并且价格不便宜,标准版2000美元,企业版5000美元,高级集群版10000美元(6万人 ...

  3. [Linux] Linux系统（文件操作）

    linux有三种文件类型,普通文件,目录,设备文件 查看文件 使用命令ls获取ll,查看文件列表,参数:-l(列表形式),-a(展示隐藏文件) 使用元字符* ? ,查看匹配的文件列表,例如:ll a* ...

  4. 我在项目中运用 IOC（依赖注入）--实战篇

    上一篇<我在项目中运用 IOC(依赖注入)--入门篇>只是简单的使用 IOC.实际项目使用 IOC 的情景复杂多了,比如说,构造函数有多个参数,有多个类继承同一个接口... Unity都有 ...

  5. java类中成员的初始化顺序(一)

    类被创建之后的成员的初始化顺序到底是怎么样的? 首先 不考虑继承 package com; public class DemoOne { /** * 关于类的初始化顺序 */ //不考虑继承结构的情况 ...

  6. spring boot入门笔记 （三） - banner、热部署、命令行参数

    1.一般项目启动的时候,刚开始都有一个<spring>的标志,如何修改呢?在resources下面添加一个banner.txt就行了,springboot会自动给你加载banner.txt ...

  7. 为什么要用 C# 来作为您的首选编程语言

    因为您可以用,并且也是您的最佳选择!之所以可用,是因为 C# 能够很好地在 Mac.Linux.Android 和 iOS 上运行(对了,还有 Windows):它可以在您最喜爱的编辑器上运行:它在一 ...

  8. 1px边框的渐变

    <div class="box">banner</div> .box { width: 100px; height: 50px; line-height: ...

  9. visibilitychange：API详解

    利用页面可见性API搞个怪 继各大站点.博客在用console发招聘.玩游戏.埋彩蛋之后(知乎相关链接),小剧似乎又发现了一个好玩儿的东西,目测会火,利用页面可见性API做些小技俩. 页面可见性是什么 ...

  10. CIO在数字化转型中如何正确定位？

    在数字化转型的大潮下,CIO和传统企业应如何抓住数字生态系统中的机遇?CIO该如何面对领导力.资金.技术和人才的挑战? Gartner研究总监陈勇表示:IT部门在企业中应转变成为一个引领创新的部门,C ...