要给文件上传<form>标签添加enctype="multipart/form-data"属性,php页面才能接到数据。
$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单,实现表单的异步提交,但是二者有区别
首先,前者,只能序列化表单中的数据 ,比如文本框等input select等的数据,但是对于文件,比如文件上传,无法实现,那么这时候,FormData就上场了,FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单
new FormData使用需要有一个注意点,
注意点一:
,对于jquery的要求是,好像是 版本1.8及其以上方可支持。
另外该对象不仅仅可以序列化文件,一样可以用作表单数据的序列化,(就是说包含了serialize()的功能);
注意点二:(js中配置)
processData:
false
, contentType:
false
,缺少这二者的设置,将会出现 红色部分的错误提示,提交失败。(ajax传值的时候设置二者)
processData设置为false。因为data值是FormData对象,不需要对数据做处理。
cache设置为false,上传文件不需要缓存。
contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。
1、创建表单
<form enctype="multipart/form-data" id="upForm">
<input type="file" name="file" ><br><br>
<input type="button" value="文件上传" class="button">
</form>
<div class="picDis">
<img src="" alt="">
</div>
2、ajax传值
<script>
//js代码
$ ('.button').click(function(event) {
//formdata储存异步上传数据
var formData = new FormData($('form')[0]);
formData.append('file',$(':file')[0].files[0]);
//坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
$.ajax({
url:'formtest.php',
type: 'POST',
data: formData,
//这两个设置项必填
contentType: false,
processData: false,
success:function(data){
console.log(data)
var srcPath = data;
console.log();
//注意这里的路径要根据自己的储存文件的路径设置
$('.picDis img').attr('src',srcPath);
}
})
});
</script>
3、接值处理文件上传的数据
$upFile = $_FILES['file'];
/**
* 创建文件夹函数,用于创建保存文件的文件夹
* @param str $dirPath 文件夹名称
* @return str $dirPath 文件夹名称
*/
function creaDir($dirPath){
$curPath = dirname(__FILE__);
$path = $curPath.'\\'.$dirPath;
if (is_dir($path) || mkdir($path,0777,true)) {
return $dirPath;
}
}
//判断文件是否为空或者出错
if ($upFile['error']==0 && !empty($upFile)) {
//同级文件夹中的uoload
$dirpath = creaDir('./upload');
// print_r($dirpath);exit;
$filename = $_FILES['file']['name'];
//图片信息为同级文件下的路径+图片名称
$queryPath = './'.$dirpath.'/'.$filename;
// print_r($queryPath);exit;
//move_uploaded_file将浏览器缓存file转移到服务器文件夹
if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
echo $queryPath;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6df196c97fe81edf8dce18e1c17aa746.jpeg)