FormData+Ajax 實現多文件上傳 學習使用FormData對象

FormData對象是爲序列化表以及建立與表單格式相同的數據（固然是用於XHR傳輸）提供便利。

今天咱們使用dropzone和FormData實現多文件上傳功能。

var SAMP = null;        //Dropzone對象
 
      SAMP = new Dropzone("#dropzone",
    {
              url: "#",  //後臺響應的連接
              maxFiles: 4,    //最大能夠傳輸的文件數量  目前咱們設定爲1
              maxFilesize: 2048, //文件大小的限制
              acceptedFiles: ".png,.jpg,.gif,.jpeg,.bmp", // 文件格式的限制
              autoProcessQueue:false,  //文件是否自動傳回到後臺
              myAwesomeDropzone:false,
    })

　　咱們設置文件不自動上傳，而經過控件按鈕實現上傳功能。首先咱們建立一個Dropzone對象，設置上傳的最大文件數量，文件大小等。

var myFormData = new FormData()

　　建立Form Data對象

SAMP.on("addedfile", function(file) {
   myFormData.append(file.name, file)
})

　　給Dropzone對象註冊addedfile事件，當上傳文件時，FormData對象的append()函數是以鍵值對的方式向myFormData成對成對的增添圖片對象。

$.ajax({　　　　　　
          type:'POST',
    　　url:"#",
　　　 data:myFormData,
          processData: false,//*必須寫
          contentType: false,//*必須寫
          success:function(data){
                       ...
        },
          error:function(){
                       ...
        }
});    

　　

　　在使用FormData對象經過Ajax向後臺傳數據時，必須在選項中設置"processData: false,contentType: false,"兩項，不然會報錯。

　　processData設置爲false。由於data值是FormData對象，不須要對數據作處理。

　　contentType設置爲false。由於是由<form>表單構造的FormData對象，且已經聲明瞭屬性enctype="multipart/form-data"，因此這裏設置爲
false。