mydal

怕光阴流逝 让一切都作废

0%

tp5图片上传

发表于 更新于 分类于
本文字数： 2.3k 阅读时长 ≈ 6 分钟

tp5实现异步图片上传

111.jpg

使用插件

bootstrp的一个fileinput插件来通过ajax的方式实现图片的上传

https://segmentfault.com/a/1190000018477200

使用步骤

下载之后 解压放到tp5项目public目录

引入依赖文件

1
2
3
4
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="__STATIC__/bootstrap-fileinput-master/css/fileinput.css"> 
<script src="__STATIC__/bootstrap-fileinput-master/js/fileinput.js"></script> 
<script src="__STATIC__/bootstrap-fileinput-master/js/locales/zh.js"></script>

页面加入控件

隐藏域用来保存上传成功后的图片地址和缩略图地址 注意给form添加文件上传的属性

1
2
3
4
5
6
7
8
<div class="Operate_cont clearfix">
    <label class="form-label">上传图片：</label>
    <div class="formControls ">
        <input type="file" id="imgUpload" class="file-loading">//不需要添加name属性  插件自动生成
        <input type="hidden" name="image" value="" id="image">
        <input type="hidden" name="image_thumb" value="" id="image_thumb">
    </div>
</div>

js代码进行配置

1
2
3
4
5
6
7
8
$("#imgUpload").fileinput({
    language: 'zh',
    uploadUrl:"{:url('product/uploadImg')}",
    autoReplace:true,
    maxFileCount:1,
    allowedFileExtensions: ['jpg','png',"gif"],//接收的文件后缀
    browseClass: "btn btn-primary"
});

监听后台返回的信息

1
2
3
4
5
6
7
8
9
$("#imgUpload").on('fileuploaded', function(event,data) {
    var path=data.response.path;//获取上传成功以后的图片地址
    var thumb_path=data.response.thumb;//获取缩略图的地址
    $("#image").val(path);//把图片地址保存到隐藏域中
    $("#image_thumb").val(thumb_path);//把缩略图地址保存到隐藏域中
    console.log(path);
    console.log(thumb_path);

});

后端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//    图片上传
    public function uploadImg(){
        $file =$this->request->file('file_data');//获取上传的图片资源
//  保存原图路径
        $path=ROOT_PATH . 'public' . DS . 'uploads'.DS.'product';
//  缩略图保存路径
        $thumb_path=ROOT_PATH . 'public' . DS . 'uploads'.DS.'product'.DS.'thumb'.DS.'thumb_'.$info->getFilename();
        $info = $file->move($path);  //移动图片
        if($info){
            $path=ROOT_PATH . 'public' . DS . 'uploads'.DS.'product'.DS.$info->getSaveName();//拿到移动后的图片
            $image=Image::open($path); 
            $image->thumb(150,150,Image::THUMB_SCALING)->save($thumb_path);//生成缩略图
            //tp5文档的写法是直接拿到$file中的临时路径进行裁剪生成缩略图的,我使用时一直出现问题,所以最好还是拼接一个移动后的图片,进行缩略图的裁剪
//            halt($info->getSaveName());
            return json([
                'status'=>1,
                'path'=>$info->getSaveName(),
                'thumb'=>'thumb'.DS.'thumb_'.$info->getFilename()
            ]);
        }else{
            // 上传失败获取错误信息
            return json([
                'status'=>0,
                'error'=>$file->getError()
            ]);
        }
    }