使用 AJAX 发送带有表单的表单文件时出错答案

【问题标题】：Error in Sending Form file with form using AJAX使用 AJAX 发送带有表单的表单文件时出错
【发布时间】：2015-05-06 12:40:55
【问题描述】：

我正在尝试使用包含 CSV 文件的 AJAX 提交表单。所以想法是使用ajax发送表单，通过生成表在不同的文件中处理它，并将处理后的表回调到页面中。

我拥有的是这个，

<form id="uploadXls" action="" method="post" enctype="multipart/form-data">
      <input id="uploaderFile" type="file" class="file"><br/>
      <button type="button" class="btn btn-orange pull-right" name="btnSubmit" id="btnSubmit"><i class="fa fa-download"></i> SHOW FILE CONTENT</button>
</form>

JavaScript 是，

$("#btnSubmit").click(function(){
            $.ajax({
                type: 'POST',
                url: '../../content/maindiv_content/drawing/divpages/process_xls_file.php',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (response, textStatus, jqXHR) {
                  $("#showFileContentTable").html(data);
                }
            });
        });

我在萤火虫中遇到这种错误，

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
http://infserver/WeltesTankage/dist/js/jquery-1.10.2.min.js line 4 > eval
Line 14

我在这里做错了什么？请帮帮我

【问题讨论】：

this 指的是您的按钮，而不是您捕获点击事件的表单。
我不小心给了我的表单与另一个元素相同的 ID，并且 AJAX 请求试图使用另一个不是表单对象的元素。

标签： javascript php ajax

【解决方案1】：

不要将文件传递给构造函数，而是使用追加，例如：

var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
data:  formData

【讨论】：

TypeError: 'append' called on an object that does not implement interface FormData.。好吧 - ..
我如何从表单中放入其他数据？

【解决方案2】：

您也可以使用这种方法。

var form = $('form').get(0);

此代码返回一个 jQuery 对象 ($('form')) 并将一个 HTML 元素传递给 FormData (get(0))。

然后在ajax请求中：data: new FormData(form),

【讨论】：

这需要更多的支持！完美运行，超级容易理解！谢谢。
yes ;) 并且您可以通过将其添加到成功功能来重置所有表单字段：$('#FormID')[0].reset(); 这也可能对某人有所帮助:)
很好的解决方案，拯救了我的一天。

【解决方案3】：

您将this 传递给FormData 构造函数。在此上下文中，this 是单击的按钮，在错误消息中标识为 HTMLFormElement。

根据documentation，FormData 构造函数需要一个form 元素。所以你必须相应地改变你的代码：

 var form = $("#uploadXls");

 $ajax({
     ...
     data: new FormData(form),
     ....
 });

【讨论】：

仍有错误：ReferenceError: formData is not defined infserver/WeltesTankage/dist/js/jquery-1.10.2.min.js line 4 > eval Line 15
@KonzMama 抱歉，打错了。 FormData 当然应该有一个大写的 F
还是有错误，这是我的代码sn-p var form = $("#uploadXls"); $.ajax({ type: 'POST', data: new FormData(form), url: '../../content/maindiv_content/drawing/divpages/process_xls_file.php',

【解决方案4】：

也许这个页面对你有帮助..:)

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
  </script>
</head>
<body>
  <form method="post" id="fileinfo" enctype="multipart/form-data">
    file <input type="file" name="slug"><br>
     <input type="button" id="uploadBTN" value="Stash the file!"></input>
  </form>
<script type="text/javascript">
    $(document).ready(function()
  {
      $('#uploadBTN').on('click', function()
      { 
        var form = $('form').get(0); 
        console.log(form);
        var fd = new FormData(form);
        fd.append('user_id',4);
        fd.append('user_media_category_id',1);
        //console.log(fd);
        fd.append("user_", "This is some extra data");
        $.ajax({
            url: 'http://localhost/yii2/voila/project/api/web/v1/user-media/new',  
            type: 'POST',
            data: fd,
            success:function(data){
                console.log(data);
            },
            error:function(data){
                console.log(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
    });
</script>
</body>
</html>

【讨论】：

【解决方案5】：

试试这个表格，它对我有用，没有问题，您好，希望能帮到您。

//规范化表格

var formulario = new FormData($('#form_img').get(0));    
    formulario.append('file', $('#customFile')[0].files[0]);

//AND add in Ajax call

data:formulario

【讨论】：