form-data - FormData - 未捕获的 TypeError:无法构造“FormData”:参数 1 不是“HTMLFormElement”类型
问题描述
有人能告诉我为什么我总是收到以下错误吗?
未捕获的 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');
}
});
我试图做所有事情。没有任何帮助。
谢谢你。
解决方案
var fd = new FormData($('#uploadSortimentReport')[0]);
试试这个,因为$('#uploadSortimentReport')
它是一个 jquery 包装对象。但是 class formData 需要一个 vanilla js dom 对象。
欲了解更多信息:$(selector)[0] 在 jQuery 中是什么意思?
推荐阅读
- c - 具有相应字母的随机数生成器
- amazon-web-services - Aws 极光 + Lambda
- node.js - 基于另一个集合 mongoose 更新集合上的虚拟字段
- php - Laravel Backpack 中每个 Event Crud 的单独 SMTP
- java - 如何使用 Java 在调用(当前)shell 中运行 shell 命令
- javascript - 如何使复选框在 24 中仅单击一次?
- java - Flink 任务管理器超时
- javascript - esbuild 不捆绑文件
- html - ipad 模式下右侧的空白垂直列/空格
- liquibase - 如何使用 liquibase 从数据库中加载序列 currvalue 和 incremenBy?