通过 Ajax 提交表单 - FormData 始终为空 [重复]

Posted 2023-03-05

【中文标题】通过 Ajax 提交表单 - FormData 始终为空 [重复]

【英文标题】：Submitting form via Ajax - FormData always empty [duplicate]

【发布时间】：2016-02-01 08:54:04

【问题描述】：

我需要使用 ajax 在服务器上上传照片。我也设置了 javascript 表单，但 FormData 对象始终为空！我尝试了各种方法来引用实际表单，但仍然无法正常工作。

小提琴示例： 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);
        
    );
));

【参考方案1】：

使用console.log() 检查时不会显示 FormData 对象中的数据。它就在那里，只是你看不见。

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

【讨论】：

您可以使用Array.from(formData) 来查看带有console.log 的值

您知道为什么它在控制台中不可用吗？即使formData.entries 显示长度为 0。