形式使用的圖片上傳阿賈克斯/ jQuery的

Question

我有一個形式multipart/form-data加密類型，像這樣的HTML代碼：

<form id="myform" action="/parse" method="post" enctype="multipart/form-data"> 
Name: <input type="text" name="name" id="name" placeholder="Enter your name"> 
Age: <input type="number" name="age" id="age" placeholder="Enter your age"> 
Photo: <input type="file" name="image" id="image"> 
<input type="submit"> 
</form> 
<div id="preview"></div> 

現在我可以告訴這個jQuery代碼預覽圖像：

$('#image').change(function() { 
    var file = $(this).get(0).files[0]; 
    //var preview = $('#preview'); 
    var img = document.createElement('img'); 
    img.src = window.URL.createObjectURL(file); 
    $('#preview').html(img); 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     window.URL.revokeObjectURL(this.src); 
    } 
    reader.readAsDataURL(file); 
    $('#preview img').css({'width':'200px'}); 
}); 

...我有這個FORMDATA（）對象：

var data = new FormData(); 
data.append('name', $('#name').val()); 
data.append('age', $('#age').val()); 

我如何添加圖像的DATAS到FormData（）對象？

謝謝！

Answer 1

這會自動將表單的所有字段添加到FormData對象，包括文件輸入。

var data = new FormData($('#myform')[0]); 

你並不需要使用

data.append('name', $('#name').val()); 
data.append('age', $('#age').val());