使用Jquery上载文件时出错&ajax

Error in file upload using Jquery & Ajax

本文关键字：amp ajax 出错 Jquery 上载 文件 使用      更新时间：2023-09-26

我正在尝试使用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方法时。如何解决这些错误？

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);
    });
});

更改此项：

var formData = new FormData(form);

至

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

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

将表单变量更改为：

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

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

我找到了问题的修复方法。以下是所做的更改：

  1. 将DOM元素传递给FormData构造函数，而不是Jquery Object
    var formData=新的formData（document.getElementById（"tradeForm"））；

  2. 从html中的表单中删除attribute-enttype="multipart/form-data"
    否则，将无法在服务器端读取表单数据。

  3. 使用正确的服务器URL（在我的情况下，URL是错误的）。错误消息-SCRIPT7002:XMLHttpRequest:网络错误0x2ef3，由于错误00002ef3而无法完成操作是由于错误的URL。这是一种误导。

相关文章：