使用 Jquery 和 Ajax 上传文件时出错答案

【问题标题】：Error in file upload using Jquery & Ajax使用 Jquery 和 Ajax 上传文件时出错
【发布时间】：2016-07-10 16:37:59
【问题描述】：

我正在尝试使用 jQuery 和 AJAX 上传文件。我使用了 HTML5 支持的 FormData 对象。我正在使用 IE11。以下是我的代码：

<form id="tradeForm" method="post" action="/trade.action?method=addTrade" enctype="multipart/form-data">
    Trade Type : <input type="text" id="tradeType" name="tradeType">
    Trade Document : <input type="file" id="attachedFile" name="attachment" size="40">
</form>

我尝试过使用$.post：

$("#tradeForm").submit(function(event){
    event.preventDefault();
    var form = $(this);
    var formData = new FormData(form);
    url = form.attr("action");

    $.post(url, formData, function(data) {
        console.log(data);
    });
});

并且还使用$.ajax

$("#tradeForm").submit(function(event){
    event.preventDefault();
    var form = $(this);
    var formData = new FormData(form);
    url = form.attr("action");

    $.ajax({
        url: url,
        type: "POST",
        data: formData,
        processData: false,  // tell jQuery not to process the data
        contentType: false   // tell jQuery not to set contentType
    }).done(function(data) {
        console.log(data);
    });
});

我收到以下错误：

参数不是可选的

当使用$.post方法时

SCRIPT7002：XMLHttpRequest：网络错误 0x2ef3，由于错误 00002ef3 无法完成操作

当使用$.ajax 方法时。我该如何解决这些错误？

【问题讨论】：

你有没有尝试使用 serialize() 函数？ var formData = form.serialize()
@cralfaro OP 正在发送文件，因此 serialize() 在这里不适用。

标签： javascript jquery ajax form-data

【解决方案1】：

FormData 构造函数需要一个 DOMElement，而不是 jQuery 对象，因此您需要修改您的 FormData() 定义。试试这个：

$("#tradeForm").submit(function(event){
    event.preventDefault();
    var $form = $(this);
    var formData = new FormData($form[0]); // note [0] here
    url = $form.prop("action");

    $.ajax({
        url: url,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false
    }).done(function(data) {
        console.log(data);
    });
});

【讨论】：

我仍然遇到同样的错误。当我记录 formData 时，我在控制台中看到 [object FormData]。我使用的是 jquery 2.1.4 版本。

【解决方案2】：

改变这个：

var formData = new FormData(form);

到

var formData = new FormData(form[0]);

由于 FormData 需要一个表单，所以 DOM 元素 this 而不是 jQuery 对象 $(this)

【讨论】：

【解决方案3】：

将表单变量更改为：

 var form  = document.getElementById('tradeForm');
 url = $(form).attr("action");

设置contentType: 'Content-Type: multipart/form-data';

【讨论】：

我仍然遇到同样的错误。当我记录 formData 时，我在控制台中看到 [object FormData]
你的网站有ssl吗？
更新后 var form = document.getElementById('tradeForm');我收到错误 - 对象不支持属性或方法“attr”
更改url = form.getAttribute("action");
'attr' 错误已解决，但出现网络错误 0x2ef3。我已经在本地服务器上托管了我的应用程序。本地运行的应用程序是否需要 SSL？

【解决方案4】：

我找到了解决该问题的方法。以下是所做的更改：

将 DOM 元素传递给 FormData 构造函数，而不是 Jquery 对象。
var formData = new FormData(document.getElementById("tradeForm"));
从 html 中的表单中移除属性 - enctype="multipart/form-data"。
否则将无法在服务器端读取表单数据。
使用正确的服务器 URL（在我的情况下 URL 是错误的）。错误消息 - SCRIPT7002: XMLHttpRequest: Network Error 0x2ef3, 由于错误 00002ef3 无法完成操作 是因为 URL 错误。这是误导。

【讨论】：