【Layui】tp5上传图片

author：咔咔

wechat：fangkangfk

这个layui上传图片初学者看不明白很正常，按照这个思路做就没问题的

首先就是拿他的前端代码

这里需要注意的就是这个button里边的lau-data这个参数，点击上传图片的时候会把这个参数带上，这里我是做成了保存路径的参数，比如这里是video，这个图片的保存路劲就是upload/video

             <div class="layui-form-item">
                 <label class="layui-form-label">缩略图：</label>
                 <div class="layui-input-inline w500 upload">
                     <input type="text" class="layui-input upload-input" style="max-width:100%;" value="789" placeholder="" id="vod_pic" name="vod_pic">
                 </div>
                 <div class="layui-input-inline ">
                     <button type="button" class="layui-btn layui-upload" lay-data="{data:{thumb_type:'video'}}" id="upload1">上传图片</button>
                 </div>
             </div>
  
 

效果图：

在下来就是js代码了

这段js代码我圈起来的都是需要注意的地方，下来就按照红框的顺序解释一下

1.绑定uoload模块

2.将layui.upload这个模块绑定给upload

3.指向dom对象

4.上传地址

5.获取当前触发上传的元素，一般用于 elem 绑定 class 的情况

6.最后一个就是图片路径

      <script type="text/javascript">
          layui.use(['form', 'layer','upload'], function () {
             // 操作对象
             var form = layui.form
                  , layer = layui.layer
                  , upload = layui.upload;
              upload.render({
                 elem: '.layui-upload'
                  ,url: "{:url('upload/upload')}?flag=vod"
                  ,method: 'post'
                  ,done :function (res) {
                     var obj = this.item;
                     var input = $(obj).parent().parent().find('.upload-input');
                      input.val(res.data);
                  }
              });
              $('.upload-input').hover(function (e){
                 var e = window.event || e;
                 var imgsrc = $(this).val();
                 if(imgsrc.trim()==""){ return; }
                 var left = e.clientX+document.body.scrollLeft+20;
                 var top = e.clientY+document.body.scrollTop+20;
                  $(".showpic").css({left:left,top:top,display:""});
                 if(imgsrc.indexOf('://')<0){ imgsrc = IMAGR_PATH  + '/' + imgsrc;	}
                  $(".showpic_img").attr("src", imgsrc);
              },function (e){
                  $(".showpic").css("display","none");
              });
          });
      </script>
  
 

  这个图片的路径不适合我的项目开发，于是我就修改了这个路径地址

这个是我在view.php里边定义属于我自己的图片路径地址

然后在到前端声明一下即可

这个时候就需要后太代码了，这个后台我们使用的是tp5

这个步骤我重新写一篇，因为这个属于我们的项目统一规范，在以后的项目开发中，会一直坚持这一套开发，并优化到最佳

tp5后台上传地址：

https://blog.csdn.net/fangkang7/article/details/85060379

文章来源: blog.csdn.net，作者：咔咔-，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/fangkang7/article/details/85060031