jQuery上載文件不適用於Ajax

Question

我嘗試使用以下簡單代碼上傳文件，但出現錯誤：

$("#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>

Answer 1

您收到的錯誤是因為：

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

（是的，應將這四行替換為一行）。

---

然后，查看另一個問題 ，該問題涵蓋與錯誤消息不直接相關的問題。

Answer 2

問題是在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) {

        }
    });
});