限制上传类型 & 多选：

① 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. [磁盘空间]lsof处理文件恢复、句柄以及空间释放问题

    曾经在生产上遇到过一个df 和 du出现的结果不一致的问题,为了排查到底是哪个进程占用了文件句柄,导致空间未释放,首先在linux上面,一切皆文件,这个问题可以使用lsof这个BT的命令来处理(这个哈 ...

  2. SQL SERVER 原来还可以这样玩 FOR XML PATH

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  3. WPF Datagrid横向排列

    <DataGrid.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal&q ...

  4. vb.net的String类型和Bytes转换（C#也适用）

    1.Bytes---->StringSystem.Text.Encoding.Unicode.GetString(bytes, 0, bytes.Length) 2.String----> ...

  5. Java基础教程(9)--流程控制

    一.分支结构 1.if语句   if语句会与其后的第一条语句或代码块结合,且只有当判断条件为true时才执行语句或代码块.例如,自行车只有在运动的时候才可以减速,就像下面这样: void applyB ...

  6. OracleServer总结进阶之系统分析（进阶完结）

    个人原创,转载请在文章头部明显位置注明出处:https://www.cnblogs.com/sunshine5683/p/10080102.html 在上一篇进阶中大概讲解了一些关于进阶方面的知识,今 ...

  7. 应用层协议FTP、DNS协议、HTTP协议分析

    分析所用软件下载:Wireshark-win32-1.10.2.exe 一．阅读导览 1．分析FTP协议 2．分析DNS协议 3. 分析HTTP协议 二．分析要求 (1)ftp部分: 学习 Serv- ...

  8. 使用dom4j处理xml操作xml数据

    使用dom4j处理xml操作xml数据 示例代码: public class TestDom4j { public static void main(String[] args) { String x ...

  9. Messenger与AIDL的异同

    Messenger与AIDL的异同 最近做项目需要使用进程间通信,大家知道应用层的进程间通信无非Broadcast,Activity,Service,Content Provider四大组件.Broa ...

  10. 数组元素的移动(删除) C#实现

    下面有四个问题: 把数组元素前后部分交换 MoveFirstPartOfArrayToTheEnd(int[] array, int index) 比如 {1,2,3,4,5,6,7} 3  => ...