tp5+layui上传图片(图片压缩)

使用的是Layui的css样式

h5代码:

<div class="controls need-img">
    <p style="text-align: left;color: #ccc;margin-left: 0.26rem;margin-top: 0.26rem">亲!最多可上传4张图片哦。</p>
    <div class="add-img" id="upload_img_icon" style="float: left">
    </div>
</div>

js代码:

    var upurl = "{:url('Index/upload1')}"; //上传图片提交地址
    layui.use(['layer','upload'], function(){
        var layer = layui.layer;
        var upload = layui.upload;
        upload.render({ //上传图片
            elem: '#upload_img_icon',
            url: upurl,
            multiple: true, //是否允许多文件上传。设置 true即可开启。不支持ie8/9
            auto:true,//自动上传
            before: function(obj) {
                layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            },
            done: function(res) {
                layer.close(layer.msg('上传成功!'));//下面是把上传以后的图片显示出来
                var html='<div class="img"  style="float: left">'+
                    '<i class="layui-icon del_img" style="position: relative;right: -1.5rem;top: -0.45rem;">&#x1006;</i>'+
                '<img class="wz_img" src="'+res.data+'" alt="" style="width: 1.5rem;height:1.5rem;margin:0.26rem 0 0.26rem 0rem;">'+
                    '</div>';
                $('.need-img').append(html);
//                $('.upload-img-box').append(
//                    '<dd class="upload-icon-img"> <div class="upload-pre-item" style="width:120px;height:100px;float:left;margin-left:15px;"> <i onclick="deleteImg($(this))" class="layui-icon">X</i>                    <img src="' + res.data + '" class="img" style="width:100%;">  <input type="hidden" class="asd" name="case_images[]" value="' + res.data + '" /> </div></dd>');
            }
            ,error: function(){
                layer.msg('上传错误!');
            }
    });

});

php代码:

//文件上传代码--带缩率图
private function uploads() {
    $params = $this->request->param();
    $file = request()->file('file');
    // 移动到框架应用根目录/public/uploads/ 目录下
    $file_path=ROOT_PATH . 'public/uploads/';
    $info = $file->move($file_path);
    $reubfo = array(); //定义一个返回的数组
    if ($info) {
        $reubfo['info'] = 1;
        $reubfo['savename'] = $info->getSaveName();
        $image = \think\Image::open(ROOT_PATH.'public/uploads'.DS.$reubfo['savename']);
        $width = $image->width();
        $height = $image->height();
        $path='sm_file/uploads/'.date('Ymd');
        if (!$this->checkPath($path)) {
            $reubfo['err'] = '生成缩略图失败';
        }
        $image->thumb(200,200,1)->save(ROOT_PATH.'public/sm_file/uploads'.DS.$reubfo['savename']);
    } else { // 上传失败获取错误信息
        $reubfo['info'] = 0;
        $reubfo['err'] = $file->getError();
    }
    return $reubfo;
}

猜你喜欢

转载自blog.csdn.net/qq_33273556/article/details/81082217