tp5框架 使用layui实现文件上传(上代码)

html代码

   上传头像


    


(上传限制在2M内)

js代码

//添加学生头像
layui.use(['upload','jquery'],function () {
    $ = layui.jquery;
    var uploadInst = layui.upload.render({
        elem:'#cover1'
        ,url:"{:url('Student/upload')}"
        ,accept:'file'  // 允许上传的文件类型
        ,auto:true // 自动上传
        ,before:function (obj) {
            console.log(obj);
            // 预览
            obj.preview(function(index,file,result) {
                // console.log(file.name);    //图片名字
                // console.log(file.type);    //图片格式
                // console.log(file.size);    //图片大小
                // console.log(result);    //图片地址
                $('#preview1').attr('src',result); //图片链接 base64
            });
            // layer.load();
        }
        // 上传成功回调
        ,done:function(res) {
            // console.log(upload);
            //console.log(res);
            $('#head_photo1').val(res.msg);
            //console.log($('#head_photo').val());
        }
        // 上传失败回调
        ,error:function(index,upload) {
            // 上传失败
        }

    });
});

php代码

//上传
    public function upload()
    {

        $file = request()->file('file');
         // 移动到框架应用根目录/public/uploads/ 目录下
         $info = $file->move('public/upload/');
         if ($info) {
             $path = '/public/upload/'.$info->getSaveName();
             return return_succ($path);
         }
    }