javascript - 通过 Ajax 提交表单 - FormData 始终为空

Question

这个问题已经有答案了:

FormData created from an existing form seems empty when I log it [duplicate] (4 个回答)

Ajax Upload image (6 个回答)

已关闭 7 年前。

我需要使用ajax将照片上传到服务器上。我也设置了 javascript 表单，但 FormData 对象始终为空!我尝试了各种方法来引用实际的表单，但仍然不起作用。

fiddle 示例: https://jsfiddle.net/cjngvg8a/

谢谢!

html:

<form id="profileImageForm" action="update.php" method="post" enctype="multipart/form-data">
<input type="text" value="hello" name="test" />
<input type="file" name="profile_pic" id="image_upload"/>
<input type="submit" value="Save"/>
</form>

js:

$('#profileImageForm').on('submit',(function(e) {
    e.preventDefault();     
    var formData = new FormData(this);

    console.log(formData);

    $.ajax({
        type:'POST',
        url: $(this).attr('action'),
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
        success:function(data){
            console.log("success");
            console.log(data);
        }
    });
}));

Answer 1

使用 console.log() 检查 FormData 对象中的数据并不会显示出来。它就在那里，只是你看不到而已。

如果您检查开发人员工具的“网络”选项卡，您可以看到表单内容正在上传。