无法构造“FormData”[关闭]

Posted 2023-05-08

【中文标题】无法构造“FormData”[关闭]

【英文标题】：Failed to construct 'FormData' [closed]

【发布时间】：2019-12-08 16:35:26

【问题描述】：

当我在我的 dropzone 中上传文件时，它不起作用。通常它工作得很好，但自从 1 个月以来我有这个 JS 错误：

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

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

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

多区代码

  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> 

Edit 01-08-2019：好的，刚刚测试过，它可以在 Microsoft Edge 44.17763.1.0 上运行，但不能在 Google Chrome 或 Firefox 上运行，有什么解释吗？

【问题讨论】：

能否也附上HTML？

请用minimal reproducible example 更新您的问题，以证明问题，最好是可运行 使用堆栈片段（[<>] 工具栏按钮；here's how to do one）。尽管 Stack Snippets 不允许 提交 表单，但正如您从我的回答中的实时示例中看到的那样，您仍然可以创建 FormData，因此应该能够复制该问题。

好的，我会尝试为我的案例做一个例子。但我认为这是浏览器的问题吗？因为我的代码过去可以在所有浏览器上运行，而现在只能在 Microsoft Edge 中运行，为什么？

【参考方案1】：

您将 字符串 传递给 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>

【讨论】：

@MasterSinge - 那么带有id="my-awesome-dropzone" 的元素不是form 元素，或者当此代码运行时它不存在（尚不存在），这将使getElementById 返回@987654330 @ [当传递给 FormData 构造函数时也会导致此错误])。

@tjcrowder - 当我控制台日志时，它返回数据 => link

如果您的 html 中没有定义

@MasterSinge - 如果我从您的问题中复制 form HTML 并将其粘贴到文件中，然后将上述答案中的代码复制到该文件中的 script 中（在 @987654334 之后@，所以我知道它存在），它适用于 Chrome。

我的错误是我在另一个表单中有一个表单