layui加tp5图片上传实例

Posted lcxin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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是如果用户点了第二次上传片,那么就会把第一张上传了的图片执行删除处理,减少服务器空间。

希望这边文章对你们有用

 

以上是关于layui加tp5图片上传实例的主要内容,如果未能解决你的问题,请参考以下文章

tp5多图上传

TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片

UEditor单独图片上传

LayUI上传图片

LayUI上传图片

LayUI上传图片