ajax异步上传图片

tp5框架中Ajax上传图片

在html中必须要用底层操作$.ajax，不能用高级操作$.post,$,get

首先form表单中要加一个enctype="multipart/form-data"

给上传图片增加一个onchange事件

function header() { //行内绑定事件
    let data = new FormData(document.querySelector('.myform')); 

//创建表单对象,用document获取表单对象
    $.ajax({
        url: "{:url('user/uploads')}",//url地址
        data: data, 
        type: 'post', //类型
        contentType: false, //上传文件必须要有
        processData: false,//默认情况下，processData 的值是 true，其代表以对象的形式上传的数据都会被转换为字符串的形式上传。而当上传文件的时候，则不需要把其转换为字符串，因此要改成false
        success: function (e) {
            if (e.status == 1) {
            $('.header_img').prop('src',e.head_img); //prop给属性赋值

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
            $('.header_img').css('display','block'); //设置css的属性
            } else {
                alert('e.msg');
            }

        }})
}

后台 

function uploads()
{

    if (!$filename=Upload::singleupload('head_img')) //封装了一个singleupload方法

{
       $e=['status'=>0,'msg'=>Upload::$upload_error];

    }
     else {
         $e = ['status' => 1, 'head_img' => $filename];

     }
    return json($e); //因为ajax是用json传输数据的所以要转换
}

 upload控制器中里面定义了一个singleupload方法

class Upload  
{
    public static $upload_error;
    public static function singleupload($name){
        //异常处理
        try{
            //获取表单上传文件
            $file=request()->file($name);
        }
        catch (Exception $e){
            //$this->error('没有文件被上传');
            self::$upload_error='没有文件被上传';
            return false;
        }
        $info=$file->validate(['size'=>'2000000','ext'=>'jpg,png,jpeg,gif','type'=>['image/jpeg','image/png','image/gif']])->move('./uploads');
        if (!$info){
            self::$upload_error=$file->getError();
            return false;
        }
        $filename='/uploads/'.$info->getSaveName();
        $filename=str_replace('\\','/',$filename);
        return $filename;
    }
}