使用的是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;
}