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请求之外）。这可能就是为什么它在第一个例子中工作的原因 - 你在表格中有所有字段并且它已被提交。查看开发工具中的网络选项卡，了解如何完成请求以及是否重新加载页面。还可以在服务器上跟踪接收的请求数以及参数。

通过Ajax上传文件附加数据，append（）不起作用

1 个答案: