Ajax上传文件

使用Ajax上传文件的话，就需要用到FromDate，FromDate，可以把form中所有表单元素的name与value组成一个queryString，提交到后台。在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。

processData:  false ,

contentType:  false ,

缺少这二者的设置，将会出现报错，提交失败。（ajax传值的时候设置二者为false）

processData设置为false。因为data值是FormData对象，不需要jquery对数据做处理。

contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false，防止jquery修改contents_type头数据。

代码部分：

ajax提交过去

<?php
    header('content-type:text/html; charset=UTF-8');
?>
<form enctype="multipart/form-data" id="upForm">
    <input type="file" name="file" ><br><br>
    <input type="button" value="提交" name="button">
</form>
<div class="picDis">
    <img src="" alt="">
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script>
    $(function(){
        $('[name=button]').click(function(event) {
            //formdata储存异步上传数据
            var formData = new FormData($('form')[0]);
            formData.append('file',$(':file')[0].files[0]);
            $.ajax({
                url:'upload_do.php',
                type: 'POST',
                data: formData,
                //这两个设置项必填
                contentType: false,
                processData: false,
                success:function(data){
                    console.log(data)
                    var srcPath = data;
                    //注意这里的路径要根据自己的储存文件的路径设置
                    $('.picDis img').attr('src',srcPath);
                }
            })
        });
    })
</script>

接受，可以收到表单中文件数据，并创建文件夹保存。

<?php

$upFile = $_FILES['file'];
//print_r($upFile);
/**
 * 创建文件夹函数,用于创建保存文件的文件夹
 * @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)) {
    $dirpath = creaDir('upload');
    $filename=date('H-i-s').'-'.rand(10000,99999).'.jpg';
    $queryPath = './'.$dirpath.'/'.$filename;
    //move_uploaded_file将浏览器缓存file转移到服务器文件夹
//    print_R($_FILES);exit;
    if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
        echo $queryPath;
    }else{
        echo '1';
    }
}

?>