使用 ajax/jQuery 上传图片的表单答案

【问题标题】：Form with image upload using ajax/jQuery使用 ajax/jQuery 上传图片的表单
【发布时间】：2013-07-04 12:40:52
【问题描述】：

我有一个带有multipart/form-data enctype 的表单，类似于以下 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());

如何将图像的数据添加到 FormData() 对象？

谢谢！

【问题讨论】：

标签： jquery forms file-upload multipartform-data

【解决方案1】：

这会自动将表单的所有字段添加到 FormData 对象，包括文件输入。

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

你不需要使用

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

【讨论】：