无法构造 'FormData'。

Question

无法构造 'FormData'。

25

当我在我的拖放区上传文件时，它不起作用。通常它非常好用，但是自从1个月以前，我就一直遇到这个JS错误：

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

这是代码，当我使用FormData时：

 var form_data = new FormData("#my-awesome-dropzone");

Dopzone代码

  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 代码

     <form  enctype="multipart/form-data" action="/settings/uploadFile"  method="post" class="dropzone" 
                        id="my-awesome-dropzone">

         
                     </form>

编辑于2019年01月08日：好的，我已经测试过，在 Microsoft Edge 44.17763.1.0 上可以运行，但在 Google Chrome 或 Firefox 上无法运行，有什么解释吗？

- MasterSinge

1

你能否附上HTML文件？ - Ramiz Wachtler

请更新你的问题，并提供一个 [mcve] 来展示问题，最好使用 Stack Snippets（即 [<>] 工具栏按钮；这里是如何创建一个）。尽管 Stack Snippets 不允许提交表单，但你可以从我的答案中的实时示例中看到，你仍然可以创建 FormData，因此应该能够重现问题。 - T.J. Crowder

好的，我会尝试为我的情况提供一个例子。但我认为这取决于浏览器，不是吗？因为我的代码过去在所有浏览器上都能运行，现在只能在Microsoft Edge上运行，为什么？ - MasterSinge

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

您将一个字符串传递给FormData。正如错误所示，它期望一个表单元素而不是一个字符串。因此：

var form_data = new FormData(document.getElementById("my-awesome-dropzone"));

实时示例：

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>