layui加tp5圖片上傳實例

　　　　　　<div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                  <div class="layui-form-item">
                      <label for="username" class="layui-form-label">
                          <span class="x-red">*</span>輪播圖
                      </label>
                      <div class="layui-input-inline">
                          <button type="button" class="layui-btn" id="add">
                            <i class="layui-icon">&#xe67c;</i>上傳圖片
                          </button>
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                          <span class="x-red">*圖片格式1920*450</span>
                      </div>
                  </div>
                  <div class="layui-form-item">
                    <img src="" alt="" id="img" style="width:100%;max-height:450px;">
                  </div>
                  <input type="hidden" name="banner" id="banner" value="">
                  <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label">
                      </label>
                      <button  class="layui-btn" lay-filter="add" lay-submit="">
                          增加
                      </button>
                  </div>
              </form>
            </div>
        </div>

前台代碼，創建一個hideen的隱藏input框來接收上傳完成的圖片路徑當點擊上傳的時候把圖片路徑插入數據庫

layui代碼實例

//執行實例
//執行圖片上傳實例
var uploadInst = upload.render({
  elem: '#add' //綁定元素
  ,url: '{:url('uploads')}' //上傳接口
  ,size: 2048
  ,choose: function(obj){
    //預讀本地文件示例，不支持ie8
    obj.preview(function(index, file, result){
      $('#img').attr('src', result); //圖片鏈接（base64）直接將圖片地址賦值給img的src屬性
    });
    // 上傳圖片時吧舊圖片的目錄傳過去刪除
    this.data={'id':$("#banner").val()};

  },done: function(res){
    // 賦值新的圖片名
    $("#banner").val(res.filename);
    //上傳完畢回調
    // console.log(res);
    if(res.code==1){
      return layer.msg('圖片上傳成功，請確認增加');
    }else{
      return layer.msg('圖片上傳失敗，請刷新后重試');
    }
  }
  ,error: function(e){
    //請求異常回調
  }
});

 

tp圖片接口代碼

/**
* [uploads 上傳圖片接口]
* @return [type] [圖片名]
*/
public function uploads(){
    $id = input('id');
    $file = request()->file('file');
    // 移動到框架應用根目錄/public/uploads/ 目錄下
    if($file){
        // 有圖片上傳先刪除之前的圖片
        // 獲取上個圖片路徑
        $dir=ROOT_PATH . 'public/uploads/'.$id;
        // 如果圖片存在則進行刪除
        if(file_exists($dir)){
            @unlink($dir);
        }
        // 上傳新的圖片
         $info = $this->upload($file);;
         $result=[
             'code'=>1,
             'msg'=>'上傳成功',
             'filename'=>str_replace('\\', '/',$info)
         ];
         return json_encode($result);
    }else{
        return false;
    }

}

方法里的id是如果用戶點了第二次上傳片，那么就會把第一張上傳了的圖片執行刪除處理，減少服務器空間。

希望這邊文章對你們有用