如何在Plupload中禁用/启用「添加文件」按钮？

问题核心 #

你当前用buttons: { browse: false }的方式是直接隐藏了按钮，而非禁用，所以后续无法通过常规方法恢复。另外，jQuery版Plupload返回的是jQuery对象，不能直接调用原生Plupload的disableBrowse方法，需要先获取原生上传实例。

解决方案步骤 #

1. 调整初始化逻辑：移除buttons: { browse: false }配置，改为初始化后调用原生实例的disableBrowse(true)来禁用按钮（按钮仍存在，只是不可点击）。
2. 获取原生上传实例：通过jQuery对象的plupload('getUploader')方法拿到原生Plupload实例，再调用disableBrowse(false)启用按钮。

修改后的完整代码 #

<script type="text/javascript">
    var uploader = $("#upl").plupload({
      // General settings
      url : g_homeUrl + "get-from-browser/",
    
      // Maximum file size
      max_file_size : '10mb',
    
      // Specify what files to browse for
      filters : [
          {title : "Image files", extensions : "jpg,jpeg,gif,png"}
      ],
    
      // Sort files
      sortable: true,
    
      // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
      dragdrop: true,
    
      // Views to activate
      views: {
          list: true,
          thumbs: true, // Show thumbs
          active: 'thumbs'
      }
    });
    
    // 获取原生Plupload实例并禁用「添加文件」按钮
    var pluploadInstance = uploader.plupload('getUploader');
    pluploadInstance.disableBrowse(true);

    uploader.init();

    uploader.bind('complete', function(up, fl){
      console.log('Completed uploading ' + fl.files.length + " files"); 
    });

    uploader.bind('error', function(up, err) {
      document.getElementById('console').innerHTML += "<br>Error #" + err.code + ": " + err.message;
    });

    document.getElementById('album-select').onclick = function(e) {
      albSet = e.target.dataset.album;
      var albTitle = e.target.dataset.title;
      var html = "Upload to album " + albTitle + "<br/>";
      html += "Click add files to select your images for upload";
      document.getElementById('console').innerHTML = html;
      
      // 启用「添加文件」按钮
      pluploadInstance.disableBrowse(false);
    }
</script>

额外说明 #

如果你的场景必须用buttons: { browse: false }完全隐藏按钮，那需要手动创建按钮并绑定Plupload的浏览事件，代码示例如下：

// 相册选择后动态添加按钮
document.getElementById('album-select').onclick = function(e) {
  // ... 原有逻辑 ...
  
  // 创建「添加文件」按钮
  var browseBtn = document.createElement('button');
  browseBtn.textContent = '添加文件';
  browseBtn.id = 'plupload-browse-btn';
  document.getElementById('upl').appendChild(browseBtn);
  
  // 绑定Plupload的浏览事件
  pluploadInstance.addButton(browseBtn);
}

内容的提问来源于stack exchange，提问作者Rushy