javascript - jQuery FormData 和文件

Question

我正在尝试进行ajax 文件上传。当我检查变量 form_data 时它是空白的？

<form action='ajax_image_upload/process.php' method='post' enctype='multipart/form-data' class='upload_form'>
  <textarea name='description' placeholder='Type Default Video Description'></textarea>
  <span>
    Channel Image: <input type='file' name='image' />
  </span>  
  <input name='__submit__' type='submit' value='Upload'/>
</form>

var container = $(".upload_form");
var form_data = new FormData();    
form_data.append('image', container.find("form > span").children("input[name='image']"));

var post_url = container.children("form").attr("action"); //get action URL of form

//jQuery Ajax to Post form data
$.ajax({
  url : post_url,
  type: "POST",
  data: form_data,
  contentType: false,
  cache: false,
  processData: false,
  mimeType: "multipart/form-data"
}).done(function(res){ 
});

我该如何解决这个问题？

Answer 1

问题是因为您需要将文件输入中的二进制数据附加到 FormData，而不是 jQuery 对象。试试这个:

var fileData = container.find("form > span").children("input[name='image']")[0].files[0]; 
form_data.append('image', fileData);

显然，如果有多个输入或输入中有多个文件，您需要循环遍历它们并单独附加它们。