FormData實現上傳多圖片，學習使用FormData

標籤：awesome   orm   自動   success   lin   ajax   ipa   sof   Enctype   

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:"/upload-img/",　　　　　　　data:myFormData,            processData: false,//*必須寫            contentType: false,//*必須寫
　　　　　　　success:function(data){

 　　　　　　　　　　　 ...
 　　　　　　　　},
 　　　　　　error:function(XMLHttpRequest, textStatus, errorThrown){
　　　　　　　　　　　　...
　　　　　　　　 }
 });

　　在使用FormData對象通過Ajax向後台傳資料時，必須在選項中設定"processData: false,contentType: false,"兩項，否則會報錯。

　　processData設定為false。因為data值是FormData對象，不需要對資料做處理。

　　contentType設定為false。因為是由<form>表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這裡設定為false。

FormData實現上傳多圖片，學習使用FormData