上传使用Ajax数据和文件的一种形式？ [英] Uploading both data and files in one form using Ajax?
问题描述
我使用jQuery和Ajax的我的形式提交的数据和文件，但我不知道如何在一个窗体数据和发送文件？
我目前做的几乎是相同的两种方法，但以何种方式将数据收集到一个数组不同的是，该数据使用 .serialize（）; 但文件使用 =新FORMDATA（$（本）[0]）;
是否有可能两种方法相结合，能够通过Ajax的上传在一个窗体文件和数据？
数据的jQuery，Ajax和HTML
$（＃表单数据）。递交（函数（）{
VAR FORMDATA = $（本）.serialize（）;
$阿贾克斯（{
网址：window.location.pathname，
键入：POST，
数据：FORMDATA，
异步：假的，
成功：功能（数据）{
警报（数据）
}，
缓存：假的，
的contentType：假的，
过程数据：假的
}）;
返回false;
}）;
＆LT;形式ID =数据的方法=邮报＆GT;
＆LT;输入类型=文本名称=第一值=鲍勃/＆GT;
＆LT;输入类型=文本名称=中间值=詹姆斯/＆GT;
＆LT;输入类型=文本名称=最后一个值=史密斯/＆GT;
＆LT;按钮＆GT;提交＆LT; /按钮＆GT;
＆LT; /形式GT;
文件的jQuery，Ajax和HTML
$（＃表单文件）。递交（函数（）{
变种FORMDATA =新FORMDATA（$（本）[0]）;
$阿贾克斯（{
网址：window.location.pathname，
键入：POST，
数据：FORMDATA，
异步：假的，
成功：功能（数据）{
警报（数据）
}，
缓存：假的，
的contentType：假的，
过程数据：假的
}）;
返回false;
}）;
＆LT;形式ID =文件的方法=邮报是enctype =的multipart / form-data的＆GT;
＆LT;输入名称=图像类型=文件/＆GT;
＆LT;按钮＆GT;提交＆LT; /按钮＆GT;
＆LT; /形式GT;
我如何可以结合上面的，这样我可以通过Ajax发送数据和文件的一种形式？
我的目标是能够与阿贾克斯将所有的这种形式在一个职位，这可能吗？
＆LT;形式ID =数据文件的方法=邮报是enctype =的multipart / form-data的＆GT;
＆LT;输入类型=文本名称=第一值=鲍勃/＆GT;
＆LT;输入类型=文本名称=中间值=詹姆斯/＆GT;
＆LT;输入类型=文本名称=最后一个值=史密斯/＆GT;
＆LT;输入名称=图像类型=文件/＆GT;
＆LT;按钮＆GT;提交＆LT; /按钮＆GT;
＆LT; /形式GT;
我用错了jQuery的标识问题。
您可以上传数据和文件一种形式的使用AJAX
PHP + HTML
＆LT ;?
的print_r（$ _ POST）;
的print_r（$ _ FILES）;
？＆GT;
＆LT;形式ID =数据的方法=邮报是enctype =的multipart / form-data的＆GT;
＆LT;输入类型=文本名称=第一值=鲍勃/＆GT;
＆LT;输入类型=文本名称=中间值=詹姆斯/＆GT;
＆LT;输入类型=文本名称=最后一个值=史密斯/＆GT;
＆LT;输入名称=图像类型=文件/＆GT;
＆LT;按钮＆GT;提交＆LT; /按钮＆GT;
＆LT; /形式GT;
的jQuery + Ajax的
$（＃表单数据）。递交（函数（）{
变种FORMDATA =新FORMDATA（$（本）[0]）;
$阿贾克斯（{
网址：window.location.pathname，
键入：POST，
数据：FORMDATA，
异步：假的，
成功：功能（数据）{
警报（数据）
}，
缓存：假的，
的contentType：假的，
过程数据：假的
}）;
返回false;
}）;
短版
$（＃表单数据）。递交（函数（）{
变种FORMDATA =新FORMDATA（$（本）[0]）;
$。员额（$（本）.attr（行动），FORMDATA，功能（数据）{
警报（数据）;
}）;
返回false;
}）;
I'm using jQuery and Ajax for my forms to submit data and files but I'm not sure how to send both data and files in one form?
I currently do almost the same with both methods but the way in which the data is gathered into an array is different, the data uses .serialize(); but the files use = new FormData($(this)[0]);
Is it possible to combine both methods to be able to upload files and data in one form through Ajax?
Data jQuery, Ajax and html
$("form#data").submit(function(){
var formData = $(this).serialize();
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="data" method="post">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<button>Submit</button>
</form>
Files jQuery, Ajax and html
$("form#files").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="files" method="post" enctype="multipart/form-data">
<input name="image" type="file" />
<button>Submit</button>
</form>
How can I combine the above so that I can send data and files in one form via Ajax?
My aim is to be able to send all of this form in one post with Ajax, is it possible?
<form id="datafiles" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>
The problem I had was using the wrong jQuery identifier.
You can upload data and files with one form using ajax.
PHP + HTML
<?
print_r($_POST);
print_r($_FILES);
?>
<form id="data" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>
jQuery + Ajax
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
Short Version
$("form#data").submit(function() {
var formData = new FormData($(this)[0]);
$.post($(this).attr("action"), formData, function(data) {
alert(data);
});
return false;
});
这篇关于上传使用Ajax数据和文件的一种形式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
