ajax 文件上传

要给文件上传<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。

//坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了

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;
    }
}