input file达成多选,限制文件上传类型,图片上传

 

图片上传前预览:

示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://www.czcyyzx.com/uploads/allimg/191012/13003261F-0.jpg"></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 删除掉。

 
限制上传类型 & 多选:

① 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 />

本文由上海时时乐走势图发布于web前端,转载请注明出处:input file达成多选,限制文件上传类型,图片上传

您可能还会对下面的文章感兴趣: