通过AJAX后发送文件,表单数据一起 [英] Sending file together with form data via ajax post
本文介绍了通过AJAX后发送文件,表单数据一起的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图用一种形式的某些字段上传通过AJAX的文件时。然而,这是行不通的。我得到这个错误。
未定义指数: - 文件
下面是我的code。
HTML
<! - 文件按钮 - >
< DIV CLASS =形组>
<标签类=COL-MD-4控制标签为=文件>上载软件/文件< /标签>
< DIV CLASS =COL-MD-4>
<输入ID =文件名称=文件级=输入文件类型=文件>
< / DIV>
< / DIV>
< DIV CLASS =形组>
<标签类=COL-MD-4控制标签为=价格>价格($)< /标签>
< DIV CLASS =COL-MD-4>
<输入ID =价格NAME =价格型=文本占位符=价格级=的形式控制输入-MD需要=>
< / DIV>
< / DIV>
阿贾克斯
$(#add_product)。点击(函数(五){
即preventDefault();
PRODUCT_NAME = $(PRODUCT_NAME)VAL()。
// D = $(#add_new_product)序列化()。
$阿贾克斯({
键入:POST,
网址:'ajax.php,
数据:$(#add_new_product)序列化()。
成功:函数(响应)
{
//
警报(响应);
}
})
});
PHP
如果(0℃,$ _FILES ['文件'] ['错误'])
{
回声 :!;
}
其他
{
回声ASA;
}
我是什么在这里失踪?
解决方案
您可以使用FORMDATA
$(#add_product)。点击(函数(五){
即preventDefault();
VAR FDATA =新FORMDATA()
fdata.append(PRODUCT_NAME,$(PRODUCT_NAME)VAL());
如果($(#文件)[0] .files.length大于0)
fdata.append(文件,$(#文件)[0] .files [0])
// D = $(#add_new_product)序列化()。
$阿贾克斯({
键入:POST,
网址:'ajax.php,
数据:FDATA,
的contentType:假的,
过程数据:假的,
成功:函数(响应)
{
//
警报(响应);
}
})
});
<! - 文件按钮 - >
< DIV CLASS =形组>
<标签类=COL-MD-4控制标签为=文件>上载软件/文件< /标签>
< DIV CLASS =COL-MD-4>
<输入ID =文件名称=文件级=输入文件类型=文件>
< / DIV>
< / DIV>
< DIV CLASS =形组>
<标签类=COL-MD-4控制标签为=价格>价格($)< /标签>
< DIV CLASS =COL-MD-4>
<输入ID =价格NAME =价格型=文本占位符=价格级=的形式控制输入-MD需要=>
< / DIV>
< / DIV>
I'm trying to upload a file via ajax together with some fields in a form. However, it doesn't work. I get this error.
Undefined Index :- File
Here's my code.
HTML
<!-- File Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="file">Upload Software / File</label>
<div class="col-md-4">
<input id="file" name="file" class="input-file" type="file">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="price">Price($)</label>
<div class="col-md-4">
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required="">
</div>
</div>
Ajax
$("#add_product").click(function(e){
e.preventDefault();
product_name = $("product_name").val();
//d = $("#add_new_product").serialize();
$.ajax({
type: 'POST',
url: 'ajax.php',
data: $("#add_new_product").serialize(),
success: function(response)
{
//
alert(response);
}
})
});
PHP
if (0 < $_FILES['file']['error'])
{
echo ":!";
}
else
{
echo "ASa";
}
What am I missing here?
解决方案
you can use FormData
$("#add_product").click(function(e){
e.preventDefault();
var fdata = new FormData()
fdata.append("product_name",$("product_name").val());
if($("#file")[0].files.length>0)
fdata.append("file",$("#file")[0].files[0])
//d = $("#add_new_product").serialize();
$.ajax({
type: 'POST',
url: 'ajax.php',
data:fdata,
contentType: false,
processData: false,
success: function(response)
{
//
alert(response);
}
})
});
<!-- File Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="file">Upload Software / File</label>
<div class="col-md-4">
<input id="file" name="file" class="input-file" type="file">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="price">Price($)</label>
<div class="col-md-4">
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required="">
</div>
</div>
这篇关于通过AJAX后发送文件,表单数据一起的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文