tp5使用layui实现单个图片上传（带附件选择）

最新推荐文章于 2024-02-03 15:48:16 发布

原创最新推荐文章于 2024-02-03 15:48:16 发布 · 707 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript

该博客介绍了如何在ThinkPHP5（TP5）框架中结合Layui前端组件库实现单个图片上传功能。HTML代码展示了包含上传按钮和预览图的表单结构，同时提供了删除图片的选项。PHP代码处理图片上传，包括验证文件、保存到服务器和返回上传结果。当用户点击上传按钮时，图片会被上传到服务器，并将图片路径显示在预览区域。

tp5使用layui实现单个图片上传（带附件选择），如何加载layui这些在此就不详谈，不懂的可以百度

html代码：

{include file="public/header" /}
<body>


<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">图片列表</a>
        <a>
          <cite>添加图片</cite></a>
      </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
  <div class="top" style="font-size: 14px">添加图片</div>
  <div style="width:100%;height: 5px;background-color: #077ee3;margin-top: 5px;margin-bottom: 20px"></div>

    <form  action="" enctype="multipart/form-data" method="post" role="form" onSubmit="return check()">


      <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
          <input  name="url" class="imgInput" type="text" readonly>
          <button class="layui-btn layui-btn-sm" onclick="return false;" id="upload_img">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <a class="layui-btn layui-btn-sm layui-btn-normal" onclick="selectImg('选择图片','{:url("selectImg")}','1000','600')" href="javascript:;">
            <i class="layui-icon">&#xe60a;</i>选择图片
          </a>
        </div>
      </div>
      <div class="img">
        <img id="pre_img" style="width:150px;"/>
      </div>
      <div class="delimg" id="delimg" href="javascript:;" onclick="delImg()" style="cursor:pointer ">删除</div>




    <div class="layui-form-item">
      <label for="" class="layui-form-label">
      </label>
      <button type="submit" class="layui-btn btnAdd" lay-filter="add" lay-submit="">
        增加
      </button>

    </div>
  </form>
</div>
<style>
  .imgInput{
    width: 600px;
    height: 35px;
  }
  .layui-form-label{
    font-size: 14px;
    width: 100px;
  }

  select{
    width: 500px;
  }
  .img{
    margin-left: 130px;
    overflow:hidden;
  }
  #pre_img{
    display: none;
    padding: 5px;
    border: 1px solid #999;
  }
  .delimg{
    display: none;
    margin-left: 130px;
    text-align: center;
    line-height: 20px;
    width: 160px;
    height: 20px;
    background-color: red;
    color: white;
    margin-top: 5px;
  }
  .btnAdd{
    margin-top: 40px;
  }
</style>

<script>


  function check(){
    var str = $('input[name="url"]').val();

    if(str ==''|| str==null || str=='undefined'){
      alert("请选择图片")
      return false;
    }

  }

  function selectImgGo($url,$urlWeb){
    $('#pre_img').show();
    $('#delimg').show();
    $('#pre_img').attr('src',$urlWeb);
    $('input[name="url"]').val($url);

  }
  layui.use(['upload','jquery'],function () {
    $ = layui.jquery;
    var upload = layui.upload;
    //执行实例
    var uploadInst = upload.render({
      elem: '#upload_img' //绑定元素
      ,url:"{:url('share/upload_img')}" //上传接口
      ,accept:'images'
      ,done: function(res){
//        alert(res.msg);
        //上传完毕回调
        $('#pre_img').show();
        $('#delimg').show();
        $('#pre_img').attr('src',res.msg);
        $('input[name="url"]').val(res.url);
      }
      ,error: function(){
        //请求异常回调
      }
    });
  });

  function delImg(){
//    alert('delImg');
    $('#pre_img').hide();
    $('#delimg').hide();
    $('#pre_img').attr('src','');
    $('input[name="url"]').val('');
  }

  /*选择图片*/
  function selectImg(title,url,w,h){
    x_admin_show(title,url,w,h);
  }




</script>

</body>

</html>

php代码

  //php layui图片上传
    public function upload_img(){
        $file = request()->file('file'); // 获取上传的文件
        if($file==null){
            exit(json_encode(array('code'=>1,'msg'=>'未上传图片')));
        }else{
            //5、对上传文件做出条件限制（类型，大小等）
            $map = [
                'ext'=>'jpg,png,gif,jpeg',//后辍名
                'size'=>320000000,//最大3M
            ];
            //6、对上传的文件进行较验，如果合格就进行转移到预定设定好的public/uploads目录下
            //返回保存的文件信息info，包括文件名和大小等数据
            $info = $file->validate($map)->move(ROOT_PATH . 'public/uploads/img');
            //获取图片宽高
            list( $width , $height , $type , $attr ) = getimagesize ($info->getPathName());

            if(is_null($info)){
                $this->error($info->getError());
            }
            $img = str_replace('\\','/',$info->getSaveName());
            //保存附件
            $annexData['filesize'] = $info->getInfo()['size'];
            $annexData['mimetype'] = $info->getInfo()['type'];
            $annexData['filename'] = $info->getInfo()['name'];
            $annexData['imagewidth'] = $width;
            $annexData['imageheight'] = $height;
            $annexData['type'] = 'img';
            $annexData['url'] = $img;
            AAnnexModel::create($annexData);
            $img = constant("URL")."/uploads/img/".$img;
            exit(json_encode(array('code'=>0,'msg'=>$img,'url'=>$annexData['url'])));
        }

    }

//图片添加页面
    public function addLunbo(){
        if($this->request->isPost()){
            //2、获取提交过来的数据，最后true参数，表示连上传文件一起获取
            $data = $this->request->param(true);
            $res = ALunboModel::create($data);
            if(is_null($res)){
                $this->error('文件添加失败');
            }else{
                $this->success('文件添加成功...',url('lunbo'));
            }
            return;
        }
        return $this->fetch('lunbo_add');
    }