使用AJAX使用表單發送表單文件時出錯
[英]Error in Sending Form file with form using AJAX
問題描述
我正在嘗試使用包含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
我在這做錯了什么？ 請幫我
5 個解決方案
解決方案1
39 已采納 2015-03-05 08:12:48
不要將文件傳遞給構造函數，而是使用append，如：
var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
data: formData
解決方案2
33 2015-10-05 18:55:44
你也可以使用這種方法。
var form = $('form').get(0);
此代碼返回一個jQuery對象（ $('form') ）並將一個HTML元素傳遞給FormData（ get(0) ）。
然后在ajax請求中： data: new FormData(form),
解決方案3
3 2015-03-05 08:14:04
您this傳遞給FormData構造函數。 在此上下文中， this是單擊的按鈕，在錯誤消息中標識為HTMLFormElement 。
根據文檔 ， FormData構造函數需要一個form元素。 所以你必須相應地改變你的代碼：
var form = $("#uploadXls");
$ajax({
...
data: new FormData(form),
....
});
解決方案4
2 2016-11-23 07:33:11
可能是這個頁面幫助你.. :)
<!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
0 2018-06-06 04:52:23
嘗試這個表格，它對我沒有問題，問候，我希望我能幫助你。
//規范化表格
var formulario = new FormData($('#form_img').get(0));
formulario.append('file', $('#customFile')[0].files[0]);
//AND add in Ajax call
data:formulario
jQuery AJAX不發送帶有表單的文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.