layui upload 模块点击选择文件按钮的禁用与启用功能

要求使用场景：在不刷新页面的情况下根据动态逻辑条件判断点击选择文件按钮时是否起作用，如果符合条件，点击按钮时系统就弹出选择文件框，如果不符合点击时就没反应。

经过分析与实现总结如下：

而实际上 upload 模块没有这种功能，只能在打开或刷新页面时进行判断 render() 不 render()，这么着并不是很灵活。

禁用：也就是 ’按钮节点对象‘.off();（基于 jq），这样的话，由 upload.render() 初始化时绑定的 click、dragleave、dragover、drop、upload 事件都会被解绑，所以再点按钮也无用，就相当于禁用。

启用：经分析源码发现，作者为了防止重复绑定事件就在 render() 的 events 事件方法中给按钮节点上设置了 data 属性，key 是 haveEvents 值是 true，当重新 render() 的时候，会判断按钮节点上 haveEvents 的值如果为真就 return 了，不再执行 on click、dragleave、dragover、drop 这几个事件了。

总结：所以重新启用的方法是，在禁用或启用的逻辑里把按钮节点的 data haveEvents 值设置成 false 就ok了。

先分析源码：（片断）

        //手动触发上传
        options.bindAction.off('upload.action').on('upload.action', function() {
            that.upload();
        });

        //防止事件重复绑定
        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);

重点是这 if (options.elem.data('haveEvents')) return; 句..，options.elem 是 render() 时所绑定的按钮节点，所以以下解决方法：

if(true){
  //启用（实际就是重新渲染）
  upload.render({...})
} else {
  //禁用
  $('.uploadButton').off().data('haveEvents', false);
}

再判断的时候条件如果为真，再渲染的话，因为 haveEvents 的值变成了 false，所以下面的代码会执行，click 事件什么就会重新绑定（不是重复），所以就实现了启用与禁用。

转自 layui upload 模块点击选择文件按钮的禁用与启用功能