Javascript 使用AJAX随表单发送表单文件时出错_Javascript_Php_Ajax

Javascript 使用AJAX随表单发送表单文件时出错

javascript php ajax

Javascript 使用AJAX随表单发送表单文件时出错,javascript,php,ajax,Javascript,Php,Ajax,我正在尝试使用包含CSV文件的AJAX提交表单。因此，我们的想法是使用ajax发送表单，通过生成一个表在不同的文件中处理表单，并将处理后的表回调到页面中我有的是这个, <form id="uploadXls" action="" method="post" enctype="multipart/form-data"> <input id="uploaderFile" type="file" class="file"><br/> <

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

我在firebug中遇到了这样的错误

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

我做错了什么？请帮助我不要将文件传递到构造函数中，而是使用append，如：

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

您将

此

传递给

FormData

构造函数。在此上下文中，

此

是单击的按钮，在错误消息中标识为

HTMLFormElement

根据

FormData

的定义，构造函数需要一个

form

元素。因此，您必须相应地更改代码：

 var form = $("#uploadXls");

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

您也可以使用这种方法

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

此代码返回jQuery对象（

$（'form'）

），并将HTML元素传递给FormData（

get（0）

）

然后在ajax请求中：

data:newformdata（表单），

可能是这个页面帮助了您……）


文件

$（文档）.ready（函数（）
{
$（'#uploadBTN'）。在（'click'，function（）上
{ 
var form=$（'form'）。get（0）；
控制台日志（表格）；
var fd=新表格数据（表格）；
fd.append（'user_id'，4）；
fd.append（'user\u media\u category\u id'，1）；
//控制台日志（fd）；
fd.append（“用户”，“这是一些额外的数据”）；
$.ajax({
网址：'http://localhost/yii2/voila/project/api/web/v1/user-media/new',  
键入：“POST”，
数据：fd，
成功：功能（数据）{
控制台日志（数据）；
},
错误：函数（数据）{
控制台日志（数据）；
},
cache:false，
contentType:false，
processData:false
});
});
});

试试这个表单，它对我来说没有问题，你好，我希望我能帮助你

//规范化形式

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

//AND add in Ajax call

data:formulario

此

引用的是您的按钮，而不是捕获单击事件的表单。我不小心给了表单与另一个元素相同的ID，AJAX请求试图使用另一个不是表单对象的元素。仍有错误：ReferenceError:formData未定义第4行>eval行15@KonzMama对不起，是打字错误。FormData应该有大写字母F当然如果有错误，这是我的代码片段

var form=$（“#uploadXls”）；$。ajax（{type:'POST'，data:new FormData（form），url:'../../content/maindiv_content/drawing/divpages/process_xls_file.php'，

这需要更多的投票！工作非常完美，非常容易理解！谢谢。是；）并且您可以通过将其添加到success函数中来重置所有表单字段：

$（“#FormID”）[0].reset（）；

这也可能对某人有所帮助：）很好的解决方案，节省了我的时间。

TypeError:“append”调用了一个不实现接口FormData的对象。

。那么-…我如何从表单中放置其他数据呢？

<!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>

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

//AND add in Ajax call

data:formulario