未捕获的 TypeError：FormData 构造函数：参数 1 未实现接口 HTMLFormElement。在 laravel 中答案

【问题标题】：Uncaught TypeError: FormData constructor: Argument 1 does not implement interface HTMLFormElement. in laravel未捕获的 TypeError：FormData 构造函数：参数 1 未实现接口 HTMLFormElement。在 laravel 中
【发布时间】：2021-04-03 15:37:33
【问题描述】：

我的表单是这样的演示

Q.1 我想将此表单转换为 ajax，但我的 ajax 代码似乎缺少一些东西。提交时根本不做任何事情。

第二季度。我还希望在选择文件不等待提交时触发更改。

第三季度。当我单击下一步按钮时，我想这样做。将所有表格保存并转到下一页。

我的刀

<form method="post" enctype="multipart/form-data" action="{{ route('update', auth()->id()) }}">
    @csrf
    @method('put')
    <fieldset>
        @include('Home.steps.step-1')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-2')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-3')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-4')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-5')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-6')
    </fieldset>
</form>

$(document).ready(function (e) {
    $('.btn-next').on('click',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr("{{ route('update', auth()->id()) }}"),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));
});

我在控制台中收到此错误。

未捕获的 TypeError：FormData 构造函数：参数 1 未实现接口 HTMLFormElement。

【问题讨论】：

标签： ajax laravel form-data

【解决方案1】：

你需要给表单元素而不是按钮

var formData = new FormData($('#form-id'));

【讨论】：

我又看到了这个错误。 i.stack.imgur.com/JcntJ.png我的问题还没解决/
@MahmoudKhosravi 试试var formData = new FormData($('#form-id')[0]);
发生这种情况是因为您使用 this 关键字创建了 FormData。 this 关键字用于引用触发 javascript 函数的元素。在您的情况下，这是一个按钮单击，因此 this 将引用该按钮。如果您使用表单提交触发了您的功能，您将不会遇到此错误。因此，当您创建新的 FormData 时，您现在必须将表单元素的 id 传递给它，而不是 'this'