javascript - 通过 Ajax 上传文件附加数据，append() 不起作用

Question

当我通过 Ajax 调用将表单数据上传到外部服务器时，通过提交表单的隐藏输入字段将表单数据传递到 FormData(); ，一切正常。

但是，当我通过将表单数据附加到 FormData(); 来将表单数据传递给 FormData(); 时，它不起作用。

为什么当您通过隐藏字段传递数据时，数据的处理与附加数据时有所不同。因为在第二种情况下它不起作用。

此方法有效:

$('#myform').on('submit', function(e){
    var formdata = new FormData(this);
    $.ajax({
        url: 'https://external-website.com/',
        type: 'POST',
        data: formdata,
        processData: false,
        contentType: false
    });
});

<form id="myform" method="post" enctype="multipart/form-data">
    <input type="hidden" name="key1" value="value1">
    <input type="hidden" name="key2" value="value2">
    <input type="file" name="file">
    <input type="submit" value="Upload">
</form>

此方法不起作用:

$('#myform').on('submit', function(e){
    var formdata = new FormData(this);
    formdata.append('key1', 'value1');
    formdata.append('key2', 'value2');
    $.ajax({
        url: 'https://external-website.com/',
        type: 'POST',
        data: formdata,
        processData: false,
        contentType: false
    });
});


<form id="myform" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
</form>

Answer 1

我没有看到您在表单提交处理程序中调用 e.preventDefault(); ，这意味着您的表单也以通常的方式提交(除了您发送的 ajax 请求之外)。这可能就是它在第一个示例中起作用的原因 - 您拥有表单中的所有字段并且已提交。 查看开发工具中的网络选项卡，了解请求的完成情况以及页面是否重新加载。还要在服务器上跟踪收到的请求数量以及参数。