如何将更多数据添加到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以获取更多示例。