要求使用場景：在不刷新頁面的情況下根據(jù)動態(tài)邏輯條件判斷點(diǎn)擊選擇文件按鈕時是否起作用，如果符合條件，點(diǎn)擊按鈕時系統(tǒng)就彈出選擇文件框，如果不符合點(diǎn)擊時就沒反應(yīng)。

經(jīng)過分析與實(shí)現(xiàn)總結(jié)如下：

而實(shí)際上 upload 模塊沒有這種功能，只能在打開或刷新頁面時進(jìn)行判斷 render() 不 render()，這么著并不是很靈活。

禁用：也就是 ’按鈕節(jié)點(diǎn)對象‘.off();（基于 jq），這樣的話，由 upload.render() 初始化時綁定的 click、dragleave、dragover、drop、upload 事件都會被解綁，所以再點(diǎn)按鈕也無用，就相當(dāng)于禁用。

啟用：經(jīng)分析源碼發(fā)現(xiàn)，作者為了防止重復(fù)綁定事件就在 render() 的 events 事件方法中給按鈕節(jié)點(diǎn)上設(shè)置了 data 屬性，key 是 haveEvents 值是 true，當(dāng)重新 render() 的時候，會判斷按鈕節(jié)點(diǎn)上 haveEvents 的值如果為真就 return 了，不再執(zhí)行 on click、dragleave、dragover、drop 這幾個事件了。

總結(jié)：所以重新啟用的方法是，在禁用或啟用的邏輯里把按鈕節(jié)點(diǎn)的 data haveEvents 值設(shè)置成 false 就ok了。

先分析源碼：（片斷）

        //手動觸發(fā)上傳
        options.bindAction.off('upload.action').on('upload.action', function() {
            that.upload();
        });

        //防止事件重復(fù)綁定
        if (options.elem.data('haveEvents')) return;

        that.elemFile.on('change', function() {
            $(this).trigger('upload.change');
        });

        options.elem.on('click', function() {
            if (that.isFile()) return;
            $(this).trigger('upload.start');
        });

        if (options.drag) {
            options.elem.on('dragover', function(e) {
                e.preventDefault();
                $(this).trigger('upload.over');
            }).on('dragleave', function(e) {
                $(this).trigger('upload.leave');
            }).on('drop', function(e) {
                e.preventDefault();
                $(this).trigger('upload.drop', e);
            });
        }

        options.bindAction.on('click', function() {
            $(this).trigger('upload.action');
        });

        options.elem.data('haveEvents', true);

重點(diǎn)是這 if (options.elem.data('haveEvents')) return; 句..，options.elem 是 render() 時所綁定的按鈕節(jié)點(diǎn)，所以以下解決方法：

if(true){
  //啟用（實(shí)際就是重新渲染）
  upload.render({...})
} else {
  //禁用
  $('.uploadButton').off().data('haveEvents', false);
}

再判斷的時候條件如果為真，再渲染的話，因?yàn)?haveEvents 的值變成了 false，所以下面的代碼會執(zhí)行，click 事件什么就會重新綁定（不是重復(fù)），所以就實(shí)現(xiàn)了啟用與禁用。

轉(zhuǎn)自 layui upload 模塊點(diǎn)擊選擇文件按鈕的禁用與啟用功能