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 將不緩存此頁面。