【Layui】tp5上传图片-阿里云开发者社区

【Layui】tp5上传图片

2022-05-12 163

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【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>