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>

//执行实例
//执行图片上传实例
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){
    //请求异常回调
  }
});

/**
* [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;
    }

}