通过 Ajax 上传文件附加数据与 append() 不起作用答案

【问题标题】：upload file via Ajax appending data with append() not working通过 Ajax 上传文件附加数据与 append() 不起作用
【发布时间】：2014-10-24 08:14:02
【问题描述】：

当我通过 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>

【问题讨论】：

您将我的答案标记为最佳，但如果您使用e.preventDefault()，它不会回答任何问题。您是否设法找出问题的真正原因？
你知道这个服务器使用的平台/技术/堆栈是什么吗？它是某种公共服务，我也可以访问和尝试吗？我只是好奇为什么它不起作用。
谢谢。我不是 PHP 人，但从我的谷歌搜索结果可以理解，此功能允许您生成具有某些参数的表单，提交时会将文件上传到 Amazon s3 并将其存储在某处。由于您不想隐藏字段，因此您必须生成一些 js 代码以将这些参数添加到您的 FormData 中，这可能是您可能遇到错误。错字，或编码问题，或其他。我建议你非常彻底地比较表单和js代码生成的请求。错误一定存在。

标签： javascript jquery ajax forms

【解决方案1】：

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

【讨论】：

我确实使用了e.preventDefault(); 我只是没有在示例中包含它。两种方法都发送相同的参数。感谢您的建议，但这个问题对我来说仍然是个谜。
好的，我在最新的 Chrome 中测试了您的代码，两个示例发送的请求基本相同，除了在第二个示例中，有效负载的第一部分是文件，然后是 key1 和 key2 .你提交到哪个服务器？尝试在那里检查请求有效负载。
谢谢。文件和密钥的顺序导致了这个问题。密钥必须在文件之前。您的评论给了我解决此问题的想法，因此我将您的答案标记为已接受。

【解决方案2】：

let formdata = new FormData;
formdata.append('file', $(YourElement).files[0]);

我认为files是一个数组，只要将[0]放在它前面就可以访问。

【讨论】：