zoukankan      html  css  js  c++  java
  • input实现文件上传

    input实现文件上传

    input + ajax 实现文件上传,包括文件大小及类型的判断

    一、html

    <input type="file" id="file" multiple="multiple" onchange="handleFile()">
    

    二、JS

    /**
    * $icon: 文件上传中loading图标
    * fs: 上传的文件($("#file")[0].files)
    * max_size: 文件大小的最大值(1024 * 1024 * 100为100M)
    */
    function handleFile() {
      let $icon = $(".upload-icon");  
      let formData = new FormData(),
        fs = $("#file")[0].files;  
      let max_size = 1024 * 1024 * 100 
    
      for (let i = 0; i < fs.length; i++) {
        let d = fs[0]
        if(d.size <= max_size){  //文件必须小于100M
          if(/.(PDF|pdf|DOC|doc|DOCX|docx)$/.test(d.name)){ //文件必须为文档
            formData.append("files", fs[i]);  //文件上传处理
          }else{
            alert('上传文件必须是PDF或DOC!')
            return false
          }
    
        }else{
          alert('上传文件过大!')
          return false
        }
      }
    
      $icon.removeClass("hidden");
    
      ajaxData({
        type: "POST",
        url: "/uploader/file",
        data: formData,
        cache: false,
        processData: false, 
        contentType: false
      }).then(res => {
        $icon.addClass("hidden");
          
        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            let _html = '';
            res.data.forEach(d => {
              _html += `
                <li data-url="${d.url}">
                  <span>${d.fileName}</span>
                  <img class="delete" src="./images/delete.png" alt="">
                </li>
              `;
            });
            $(".upload-content .upload-list").append(_html);
          }
        } else {
          alert(res.msg);
        }
      });
    }
    

    1.FormData

    FormData的主要用途有两个:
    1、将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。
    2、异步上传文件

    (创建一个空对象,可以通过append()方法来追加数据)

    参考文档

    2.ajax文件上传参数

    1)contentType:false

    告诉服务器从浏览器提交过来的数据格式。

    默认值为contentType = "application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。上传文件时,在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件。

    学习资料

    2)processData: false

    jquery是否对数据进行预处理。

    默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

    3)cache: false

    类型:Boolean

    默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

  • 相关阅读:
    Codeforces Gym 100571A A. Cursed Query 离线
    codeforces Gym 100500 J. Bye Bye Russia
    codeforces Gym 100500H H. ICPC Quest 水题
    codeforces Gym 100500H A. Potion of Immortality 简单DP
    Codeforces Gym 100500F Problem F. Door Lock 二分
    codeforces Gym 100500C D.Hall of Fame 排序
    spring data jpa 创建方法名进行简单查询
    Spring集成JPA提示Not an managed type
    hibernate配置文件中的catalog属性
    SonarLint插件的安装与使用
  • 原文地址:https://www.cnblogs.com/jasmine-95/p/9877695.html
Copyright © 2011-2022 走看看