如何將更多數據添加到HTML5 AJAX FormData對象

Question

我試圖將page_id和page_slug添加到循環中，以便在上傳圖像時，詳細信息頁面id和slug會轉到。

通常我會用這個：data: { page_id: page_id, page_slug: page_slug } 但FORMDATA是有..

(function() { 
var input = document.getElementById("images"), 
    formdata = false; 
var page_id = $('#page_id').val(); 
var page_slug = $('#page_slug').val(); 


function showUploadedItem (source) { 
    var list = document.getElementById("image-list"), 
     li = document.createElement("li"), 
     img = document.createElement("img"); 
    img.src = source; 
    li.appendChild(img); 
    list.appendChild(li); 
} 

if (window.FormData) { 
    formdata = new FormData(); 
    document.getElementById("btn").style.display = "none"; 
} 

input.addEventListener("change", function (evt) { 
    document.getElementById("response").innerHTML = "Uploading . . ." 
    var i = 0, len = this.files.length, img, reader, file; 

    for (; i < len; i++) { 
     file = this.files[i]; 

     if (!!file.type.match(/image.*/)) { 
      if (window.FileReader) { 
       reader = new FileReader(); 
       reader.onloadend = function (e) { 
        showUploadedItem(e.target.result, file.fileName); 
       }; 
       reader.readAsDataURL(file); 
      } 
      if (formdata) { 
       formdata.append("images[]", file); 
      } 
     } 
    } 

    if (formdata) { 
     $.ajax({ 
      url: "admin/pages/upload/", 
      type: "POST", 
      data: formdata, 
      processData: false, 
      contentType: false, 
      success: function (res) { 
       document.getElementById("response").innerHTML = res; 
      } 
     }); 
    } 
}, false); 
}()); 

Answer 1

我不認爲你可以操縱FORMDATA直接對象$.ajax甚至$.ajaxSetup函數中，因此增加兩個呼叫追加在下面的代碼塊中應該包含所需的參數。

if (window.FormData) { 
    formdata = new FormData(); 
    formdata.append('page_id', page_id); 
    formdata.append('page_slug', page_slug); 
    document.getElementById("btn").style.display = "none"; 
} 

的page_id和page_slug值是唯一的，所以不要需要附加的循環;只是在創建FormData對象後一次。

另請參閱Using FormData objects以獲取更多示例。