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

程序员文章站 2022-03-21 18:45:32

上传文件多选，常用文件上传类型，图片上传前预览，上传进度。 ......

限制上传类型 & 多选：

① 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: 0;
        padding: 0;
    }

    .tip {
        width: 100%;
        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 #333;
        box-sizing: border-box;
        font-size: 100px;
        line-height: 100px;
        font-weight: 100;
        color: #333;
        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 = 0;
$(".add").click(function(e) {
    if (!$("#upload")[0]) {
        $(".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[0]);
    $(el).removeAttr('id');
}
// 删除图片并删除对应隐藏的input
function del(cls){
    $(".num" + cls).remove();
}
</script>

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

上一篇：日历签到插件

下一篇： jquery点击来回切换