【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