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

php javascript ajax

2022-08-30 18:39:47

我正在尝试使用包含 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

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

答案 1

不要将文件传递到构造函数中，而是使用 append，如下所示：

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

答案 2

您也可以使用此方法。

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

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

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