FormData - 未捕获的 TypeError：无法构造“FormData”：参数 1 不是“HTMLFormElement”类型答案

【问题标题】：FormData - Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElementFormData - 未捕获的 TypeError：无法构造“FormData”：参数 1 不是“HTMLFormElement”类型
【发布时间】：2020-12-17 00:24:57
【问题描述】：

谁能告诉我为什么我总是收到以下错误？

未捕获的 TypeError：无法构造“FormData”：参数 1 不是“HTMLFormElement”类型。

我的 HTML：

<form role="form" id="uploadSortimentReport" enctype="multipart/form-data">
                 <div class="card-body">
                    <div class="form-group">
                       <label>XML file</label>
                          <div class="input-group">
                             <div class="custom-file">
                                <input type="file" class="custom-file-input" name="report">
                                <label class="custom-file-label">choose file</label>
                             </div>
                          </div>
                    </div>
                    <div class="form-group">
                       <label>Country</label>
                       <select name="country" class="form-control">
                             <option value="">choose</option>
                             <option value="sk">Slovak</option>
                             <option value="cz">Czech</option>
                       </select>
                    </div>
                 </div>
                 <div class="card-footer">
                    <button type="submit" name="uploadReport" class="btn btn-info" id="uploadButton">Upload</button>
                 </div>
              </form>

我的JS（我知道ajax没有完成，但我认为它不应该抛出错误）

$.validator.setDefaults({
     submitHandler: function () {
        $('#uploadButton').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing');
        var fd = new FormData($('#uploadSortimentReport'));
     }
  });
  $('#uploadSortimentReport').validate({
     rules: {
        report: {
           required: true,
           extension: "xml"
        },
        country: {
           required: true
        }
     },
     messages: {
        report: {
           required: "Please choose file.",
           extension: "Only XML file is accepted."
        },
        country: {
           required: "Please choose country."
        }
     },
     errorElement: 'span',
     errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.form-group').append(error);
     },
     highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
     },
     unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
     }
  });

我尝试了一切。没有任何帮助。

谢谢。

【问题讨论】：

标签： form-data

【解决方案1】：

var fd = new FormData($('#uploadSortimentReport')[0]);

试试这个，因为$('#uploadSortimentReport') 是一个 jquery 包装对象。但是 class formData 需要一个 vanilla js dom 对象。

欲了解更多信息：What does $(selector)[0] mean in jQuery?

【讨论】：