input实现文件上传

input实现文件上传

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

1、html

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

2、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的主要用途有两个：

一、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减小表单元素的拼接，提升工做效率。

二、异步上传文件

(建立一个空对象,能够经过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 将不缓存此页面。