技術標籤：javascriptjavascript

正常來說吧 一般上傳的介面 應該都是同一個 但是可能有三個上傳按鈕 還是有這種業務的存在的

這個時候 我們繫結上傳控制元件

其實會有一些小夥伴 不會注意到 layui人家是支援 根據類名例項化上傳物件的 還是閒著沒事多看看文件比較好的

<button class="layui-btn layui-btn-radius layui-btn-primary" data-id="picture" id="picture" data-type="picture">上傳圖片</button>
    <button class="layui-btn layui-btn-radius layui-btn-normal" id="video" data-id="video" data-type="video">上傳視訊</button>
    <button class="layui-btn layui-btn-radius layui-btn-warm" id="music" data-id="music" data-type="music">上傳音樂</button>
 

根據對類名的繫結 就可以實現一次性對三個按鈕的綁定了

其實this.item 就是當前點選觸發的那個按鈕元素 這次可以進行 對上傳完成之後的 元素進行操作 比如: 上傳視訊 根據元素的設定的自定義屬性判斷 來追加到 視訊的預覽的容器中

layui.use(['jquery', 'upload'], function() {
            var $ = layui.jquery, upload = layui.upload;
            upload.render({
                elem: '.layui-btn'
                , url: ''
                , done: function (res, index, upload) { //上傳後的回撥

                },
                choose: function() {
                    var el = this.item;
                    console.log($(el).data().type)
                }
                ,accept: 'file' //允許上傳的檔案型別
                ,size: 50 * 1024 //最大允許上傳的檔案大小
            })
        })
 

這下就很簡單了

關注我 持續更新前端知識

新的一年新的開始 加油