Javascript 使用 AJAX 发送带有表单的表单文件时出错
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28872872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error in Sending Form file with form using AJAX
提问by Konz Mama
I am trying to submit form using AJAX that contains CSV File. So the idea is sending the form using ajax, process it in different file by generating a table and call back the processed table back into the page.
我正在尝试使用包含 CSV 文件的 AJAX 提交表单。所以想法是使用ajax发送表单，通过生成表将其处理在不同的文件中并将处理后的表回调回页面。
What i Have is this,
我有的是这个，
<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>
and the JavaScript is,
而 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);
}
});
});
and im getting this kind of error in 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
What am i doing wrong here ? Please help me
我在这里做错了什么？请帮我
回答by Naqeeb Sial
Don't pass the files into the constructor, but use append, like:
不要将文件传递给构造函数，而是使用 append，例如：
var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
data: formData
回答by WhiteOne
You can use this approach too.
您也可以使用这种方法。
var form = $('form').get(0);
this code returns a jQuery object($('form')) and pass a HTML element to FormData (get(0)).
此代码返回一个 jQuery 对象( $('form')) 并将一个 HTML 元素传递给 FormData ( get(0))。
then in ajax request: data: new FormData(form),
然后在ajax请求中： data: new FormData(form),
回答by J?rgen R
You pass thisto the FormDataconstructor. In this context, thisis the button clicked, identified in the error message as a HTMLFormElement.
你传递this给FormData构造函数。在此上下文中，this是单击的按钮，在错误消息中标识为HTMLFormElement.
According to the documentationthe FormDataconstructor expects a formelement. So you have to change your code accordingly:
根据文档，FormData构造函数需要一个form元素。因此，您必须相应地更改代码：
var form = $("#uploadXls");
$ajax({
...
data: new FormData(form),
....
});
回答by Kalpesh Desai
may be this page help you..:)
可能是这个页面帮助你..:)
<!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>
回答by Julio Vinachi
Try this form, it works for me without problems, Greetings, I hope I can help you.
试试这个表格，它对我没有问题，你好，我希望我能帮到你。
//normalize form
//标准化表格
var formulario = new FormData($('#form_img').get(0));
formulario.append('file', $('#customFile')[0].files[0]);
//AND add in Ajax call
data:formulario
