layui加tp5图片上传实例

Posted 2020-11-13 lcxin

　　　　　　<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是如果用户点了第二次上传片，那么就会把第一张上传了的图片执行删除处理，减少服务器空间。

希望这边文章对你们有用