【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