Question

我知道这个基本主题已经研究了很多遍，并且我使用了从这里发布在我自己的应用程序中的代码。但是，我遇到了一个我无法解决的错误，这让我发疯。我有一个带有两个隐藏控件的表单（其他表单中没有这个问题），一个文件控件，一些标准输入控件和一个textarea ...（下面是表单的示例）。当我使用JavaScript（和Ajax）尝试提交它时，遇到了无法解决的错误：

TypeError：FormData.constructor的参数1没有实现HTMLFormElement接口。

表格：

<form class='form form-horizontal' method='post' action='' name='attachment_form' id='attachment_form'>
  <input value=1 name='event_link3' id='event_link3' hidden />
  <input value=9683 name='contributor_link3' id='contributor_link3' hidden />
  <div class='row'>
     <!-- file upload option -->
     <div class='col-lg-5 col-11'>
        <div class='form-group file-upload'>
           <label>Select File to Upload:</label><br />
           <input type='file' class='form-control' id='attachment_file' 
                                    name='attachment_file' accept='.pdf, .mp4, .mov, .avi, .f4v' 
                                    data-toggle='tooltip' data-placement='bottom'
                                    title='File to be uploaded should be &#39;standard&#39; video or pdf format'
                             />
        </div> <!-- / form-group -->
     </div> <!-- // col-5 -->
     <div class='col-1'>            <a name='attachment_clear'
                             onclick='attachment_clear()'
                             class='btn btn-primary btn-md clearButton'
                             data-toggle='tooltip' data-placement='bottom' title='Clear Selection'
                             style='margin-left: -12px !important; margin-top: 40px !important;'>
                             <i class='fa fa-trash' aria-hidden='true'></i></a>
     </div> <!-- // col-1 -->
     <div class='col-lg-6 col-12'>
        <label>Web Link/URL:</label><br />
        <input type='url' class='form-control'
                                 id='web_url' name='web_url' 
                                 data-toggle='tooltip' data-placement='bottom'
                                 title='Web address must include http:// or https:// to be valid'
                          />
     </div> <!-- // col-6 -->
  </div> <!-- // row -->
  <div class='row'>
     <div class='col-lg-6 col-12'>
        <label>Short Description:</label>
        <input class='form-control' name='short_description' id='short_description'
                                 data-toggle='tooltip' data-placement='bottom'
                                 title='A short description of the file (displayed for link)' required/>
     <p class='help-block'><b>Short Description is Required</b> -- the text will be used
                       to display as text for the file link.</p>
     </div> <!-- // col-6-->
     <div class='col-lg-6 col-12'>
        <label>File Description:</label>
        <textarea class='form-control' name='description' id='description' rows=5 required></textarea>
        <p class='help-block'><b>Description is Required</b> -- Describe the file or link in as much
                          detail as you need ... you can also format this to some extent (see toolbar)</p>
     </div> <!-- // col-12-->
  </div> <!-- // row -->
  <button id='attachment_submit' name='attachment_submit' class='btn btn-primary' style='margin-top: 10px;'><i class='fa fa-upload'></i>&nbsp;Upload Attachment</button>
</form>

处理表单的Javascript代码基于我在StackOverflow上提取的代码，并且在其他地方已经成功运行。我看不出有什么不同或错误...

$("#attachment_form").submit(function(e)
  {
     e.preventDefault();

     // first thing, clear out the message div used for this (if there's anything there):
     document.getElementById("attachment_message").innerHTML = "";

     // validation:
     var filename_check = document.getElementById( "attachment_file" ).value;
     var web_url_check  = document.getElementById( "web_url" ).value;
     if ( filename_check == "" && web_url_check == "" )
     {
        alert( "You must either select a file to upload or enter a web address ..." );
        return;
     }
     // on the flip side:
     if ( filename_check != "" && web_url_check != "" )
     {
        alert( "You must either select a either file to upload or a web address, not both ..." );
        return;
     }

     // get value from TinyMCE
     var description  = tinymce.get('description').getContent();
     // make sure it's in the textarea by the same name
     document.getElementById( "description" ).value = description;


     // this has always worked in the past, but having issues:
     var formData = new FormData(this);
 // this is where the error occurs when I open the web console of my browser

我希望有人对此有经验，并且可以告诉我错误是什么，因为我在这一点上完全感到困惑。（我已在警报中选中“ this.id”，以确保我使用的是正确的表格...）

Answer 1

FormData调用可能需要DOM元素而不是jQuery元素。尝试传递this [0]或this.get（）以获取表单的Html元素。

Answer 2

好的，我发现了我的问题（由于建议查看上述Art3mix的输出日志）。问题是我有一个周围的div标签，它也是，也称为“ attachment_form”（我有一个可折叠的（引导4）div，它通过一个按钮打开，但我什至都没有想到事实上，我已将表格命名为与div相同的名称）。通过将其（及其引用）更改为“ attachment_window”，可以解决整个问题。哇。感谢您查看控制台输出日志的建议。我很少（如果有的话）去看。

JavaScript，Ajax表单提交-第一个元素上的错误

2 个答案: