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 将不缓存此页面。