Javascript 未能构建“FormData”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/57285984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Failed to construct 'FormData'
提问by MasterSinge
When I upload file in my dropzone, it do not work. Usually it's work very well, but since 1 month I have this JS Error :
当我在 dropzone 中上传文件时，它不起作用。通常它工作得很好，但自 1 个月以来我有这个 JS 错误：
Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
That is the code, when I use FormData :
那是代码，当我使用 FormData 时：
var form_data = new FormData("#my-awesome-dropzone");
Dopzone code
多区码
Dropzone.options.myAwesomeDropzone = {
maxFilesize: 5,
maxFiles: 1,
addRemoveLinks: true,
dictResponseError: 'Server not Configured',
acceptedFiles: ".pdf",
init:function(){
var self = this;
// config
self.options.addRemoveLinks = true;
self.options.dictRemoveFile = "Delete";
//New file added
self.on("addedfile", function (file) {
console.log('new file added ', file);
if(!confirm("Do you want to upload the file?")){
this.removeFile(file);
return false;
}
});
// Send file starts
self.on("sending", function (file, xhr, formData) {
console.log('upload started', file);
$('.meter').show();
var form_data = new FormData("#my-awesome-dropzone");
$.ajax({
url: '/settings/uploadFile',
data: 'file=' + file.name ,
type: 'POST',
processData: false,
contentType: false,
success: function(response) {
}
});
});
// File upload Progress
self.on("totaluploadprogress", function (progress) {
console.log("progress ", progress);
$('.roller').width(progress + '%');
});
self.on("queuecomplete", function (progress) {
$('.meter').delay(999).slideUp(999);
});
// On removing file
self.on("removedfile", function (file) {
console.log(file);
});
}
HTML CODE
代码
<form enctype="multipart/form-data" action="/settings/uploadFile" method="post" class="dropzone"
id="my-awesome-dropzone">
</form>
Edit 01-08-2019: Okay, just tested, and it's works on Microsoft Edge 44.17763.1.0 but not on Google Chrome or Firefox, any explanation ?
编辑 01-08-2019：好的，刚刚测试过，它适用于 Microsoft Edge 44.17763.1.0，但不适用于 Google Chrome 或 Firefox，有什么解释吗？
Advance Thanks,
提前谢谢，
回答by T.J. Crowder
You're passing a stringto FormData. As the error says, it expects a form element, not a string. So:
您正在将字符串传递给FormData. 正如错误所说，它需要一个表单元素，而不是一个字符串。所以：
var form_data = new FormData(document.getElementById("my-awesome-dropzone"));
Live Example:
现场示例：
var data = new FormData(document.getElementById("my-awesome-dropzone"));
console.log("Created FormData, " + [...data.keys()].length + " keys in data");<form enctype="multipart/form-data" action="/settings/uploadFile" method="post" class="dropzone" id="my-awesome-dropzone">
<input type="text" name="x" value="kittens">
<input type="text" name="y" value="puppies">
</form>