jQuery上传文件不适用于ajax

jQuery upload file not work with ajax

本文关键字：适用于 ajax 不适用 文件 jQuery      更新时间：2023-09-26

我试图用下面的简单代码上传文件，但我得到了错误：

$("#register_to_buy_card").submit(function (event) {
        event.preventDefault();
        var $this = $(this);
        var url = $this.attr('action');
        var form = document.forms.namedItem($this);
        var formdata = new FormData(form);
        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: formData,
            success: function (data) {
            },
            error: function (data) {
            }
        });
    });

我得到这个错误：

TypeError: Argument 1 of FormData.constructor is not an object.
var formdata = new FormData(form);

HTML:

<form id="register_to_buy_card" enctype="multipart/form-data" accept-charset="UTF-8" action="http://localhost/sample/registerToBuyCard" method="POST">
    <label for="passport">Passport Image</label>
    <input type="file" name="passport">
    <div class="checkbox">
    <button class="btn btn-default" type="submit">Submit</button>
</form>

您得到的错误是因为：

var form = document.forms.namedItem($this);

namedItem需要一个字符串。您正在传递它var $this = $(this);，它是一个jQuery对象。

this已经是一个表单对象。所以改变：

    var $this = $(this);
    var url = $this.attr('action');
    var form = document.forms.namedItem($this);
    var formdata = new FormData(form);

至

var formdata = new FormData(this);

（是的，这四行应该替换为一行）。

然后看另一个问题，它涵盖了与错误消息没有直接关系的问题。

问题是FormData中传递的元素不是表单，而是jQuery对象。你需要把this的形式放在上下文中。

你需要更新这个：

var formdata = new FormData(this);

和用途：

contentType:false,
processData:false,

在ajax选项中。

更新后的代码应为：

$("#register_to_buy_card").submit(function (event) {
    event.preventDefault();
    var url = $(this).attr('action');
    var formdata = new FormData(this);  // <--------update with 'this'
    $.ajax({
        url: url,
        type: "POST",
        dataType: "json",
        data: formData,
        contentType:false,   //<-----------required
        processData:false,   //<-----------required
        success: function (data) {
        },
        error: function (data) {
        }
    });
});
相关文章：