利用formdata对象可以实现文件的异步上传(不用再序列化了,所有数据都在$_POST中)
html代码 (注意表单的enctype属性必须是multipart/form-data)
<form id="form1" enctype="multipart/form-data">
<input type="text" name="name">
<input type="text" name="pwd">
<input type="text" name="cid">
<input id="file" type="file" name="file">
<input id="btn" type="button" value="保存">
</form>
js代码
$("#btn").on("click", function(){
//注意,formData是表单中的对象,$("#form1")[0]是DOM表单对象而不是input对象
var formData = new FormData($("#form1")[0]);
//往formData插入普通的表单数据以便与文件一起提交到服务器
var data=$('form').serializeArray();
$.each(data,function(index,item){
formData.append(item.name,item.value);
});
$.ajax({
url: '__URL__/test1',//数据提交的目标文件
type: 'POST',
data: formData, // 上传formdata封装的数据
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
success:function (data) { //成功回调
console.log(data);
}
});
});
注意:
1.创建FormData对象时传入的参数必须是表单对象!并且必须是DOM对象不能时iQuery对象
2.完成上述步骤后就可以在后台验证$_FILES['file']是否存在(php语言),如果存在说明文件上传正确,不存在说明意不提交文件不成功。
3.FormData可以插入普通的表单数据与文件一并提交,但是$_POST中只可以找到普通的保单数据,文件的信息在$_FILES['提交时的name属性']中
php代码(ThinkPHP3.2的控制器代码)
public function test1(){
$data=I('post.');
// $this->ajaxReturn($_FILES['file']);//用于测试前端数据是否上传成功
if(IS_POST){
if($_FILES['file']['error']==0){
$config=array(
'rootPath'=>'./Application/public/uploads/'//配置文件上传的路径
);
$upload=new \Think\Upload($config);//创建upload对象
$info=$upload->uploadOne($_FILES['file']);
$this->ajaxReturn($info);
}
}
}