formdata异步上传图片（文件）

要实现一个异步上传图片成功后不刷新页面显示图片的效果，可以用到dataform

前端页面：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<form id= "uploadForm">
    <div>
        <p >上传文件： <input type="file" name="file"/></p>
        <input type="button" value="上传" οnclick="doUpload()" />
        <img  src="" alt="" id="img">
    </div>

</form>

<script>
    function doUpload() {
        var formData = new FormData($( "#uploadForm")[0]);

        $.ajax({
            url: 'http://yii-ad.com/backend/web/index.php?r=upload/upload' ,
            type: 'POST',
            data: formData,
            dataType:'json',
            async: false,
            cache: false,
            contentType: false,// 告诉jQuery不要去设置Content-Type请求头
            processData: false,// 告诉jQuery不要去处理发送的数据
            success: function (res) {
               console.log(res);
                $('#img').attr('src',res.path);
            },
            error: function (returndata) {
                alert(returndata.path);
            }
        });
    }
</script>

效果如图

后端代码（PHP，Yii框架）：

public function actionUpload(){
        //接收POST方式上传的文件，存放到临时文件夹
        //dump(isset($_FILES));die;
        if(isset($_FILES)&&(!empty($_FILES))){
            foreach($_FILES as $el)//获取文件，这里默认都是每次都单文件上传
            {
                $file=$el;
            }
            if(is_uploaded_file($file["tmp_name"])){//确认是POST方式上传的文件
                $cache_path="upload/";//暂存文件的目录
                $fname=$file["name"];//获取文件名
                $ftype=$file["type"];//获取文件类型
                $ftmp_name=$file["tmp_name"];//获取临时文件路径
                $fsize=$file["size"];//获取文件大小
                $ferror=$file["error"];//获取文件错误代号

                //判断文件大小是否符合规则
                if(!$this->check_size($fsize)){
                    echo json_encode(array("error"=>"102"));//102错误码代表文件过大
                    exit;
                }

                $suffix=strtolower(stristr($fname, "."));//获取文件后缀名(包含了点号),并后缀名小写化
                //判断文件类型是否为图片
                if(!$this->is_img($suffix)){
                    //如果不是图片类型，直接返回error为101，代表文件类型错误
                    echo json_encode(array("error"=>"101"));
                    exit;
                }

                $uniqStr=uniqid(strtotime("now")."_".mt_rand(100000,999999)."_");//创建随机ID
                $fname_new = $cache_path.$uniqStr.$suffix;//利用当前时间戳构造新的文件名称
                move_uploaded_file($ftmp_name, $fname_new);//将临时文件区的文件移动到暂存区中
                //$fname_new=stristr($fname_new,"/");
                echo json_encode(array("path"=>$fname_new));//返回文件路径给看、客户端
            }else{
                echo json_encode(array("error"=>"400"));//400错误码代表文件非法上传(不是httppost提交)
            }

        }else{
            echo json_encode(array("error"=>"404"));//404错误码代表文件为空
        }
    }


    /**
     *判断文件后缀是否是图片
     *@param string $suffix :带点的后缀名(如.jpg)
     *@return bool 如果是图片后缀名返回true,否则返回false
     */
    function is_img($suffix){
        $suffix_arr=array('.jpg','.png','.gif','.jpeg','.bmp');
        return in_array(strtolower($suffix), $suffix_arr);
    }

    /**
     *判断文件大小是否非法
     *@param int $size :单位为byte的整数，文件大小
     *@return bool 如果文件大小小于或等于规定的最大值返回true,否则返回false
     */
    function check_size($size){
        $postMaxSize=intval(ini_get("post_max_size"));//post文件最大值
        $uploadMaxFilesize = intval(ini_get("upload_max_filesize"));//upload上传文件最大值
        $max=min($postMaxSize,$uploadMaxFilesize) *1024*1024;//将MB转换为byte单位数据
        if(intval($size)<=$max){
            return true;
        }else{
            return false;
        }
    }

效果如图：