【全网首创】修改 Ext.ux.UploadDialog.Dialog 源码支持多选添加文件，批量上传文件

　　公司老框架的一个页面需要用到文件上传，本以为修改一个配置参数即可解决，百度一番发现都在说这个第三方插件不支持文件多选功能，还有各种各样缺点，暂且不讨论这些吧。先完成领导安排下来的任务。

　　任务一：支持多选添加文件

　　任务二：支持批量添加文件

　　我们先来说第二个任务吧，第二个任务相比较容易些，经过半天研究源码，发现他每次都将文件，添加到队列中“queue”然后不停的拿队列中的数据

　　添加队列源码(大约在源码的第35行左右)

  this.postEvent = function(event, data)
  {
    data = data || null;
    this.queue.push({event: event, data: data});
    if (!this.is_processing) {
      this.process();
    }
  }

　　获取队列源码(大约在源码的第47行左右)，拿到一条数据，就回调一次相应的方法

  this.process = function()
  {
    while (this.queue.length > 0) {
      this.is_processing = true;
      var event_data = this.queue.shift();
      this.handler.call(this.scope, event_data.event, event_data.data);
    }
    this.is_processing = false;
  }

　　经过大半天的调试，发现是这个问题造成的，从队列里拿到一条数据后，误认为上传已完成，直接执行下面的操作，我是这样解决他的，写了个定时器，实时监控队列中的个数，如果队列中的个数不为0，不继续执行其他的操作

解决方案部分截图：

 

源码修改

第一步：创建input标签时，新增属性：multiple: "multiple"(大约在源码的第283行左右)

    this.input_file = Ext.DomHelper.append(
      button_container, 
      {
        tag: 'input',
        type: 'file',
        size: 1,
        multiple: "multiple",
        name: this.input_name || Ext.id(this.el),
        style: 'position: absolute; display: block; border: none; cursor: pointer'
      },
      true
    );

第二步：修改添加文件到上传队列源码(大约在源码的第1050行左右)

  addFileToUploadQueue : function(browse_btn)
  {
    var input_file = browse_btn.detachInputFile();
    
    input_file.appendTo(this.form);
    input_file.setStyle('width', '100px');
    input_file.dom.disabled = true;
    var store = this.grid_panel.getStore();
      for (var i = 0; i < input_file.dom.files.length; i++) {
          if (i==0) {
              store.add(
                  new Ext.ux.UploadDialog.FileRecord({
                      state: Ext.ux.UploadDialog.FileRecord.STATE_QUEUE,
                      filename: input_file.dom.value.replace(input_file.dom.files[0].name, input_file.dom.files[i].name),
                      note: this.i18n.note_queued_to_upload,
                      input_element: input_file
                  })
              ); 
          } else {
              store.add(
                  new Ext.ux.UploadDialog.FileRecord({
                      state: Ext.ux.UploadDialog.FileRecord.STATE_QUEUE,
                      filename: input_file.dom.value.replace(input_file.dom.files[0].name, input_file.dom.files[i].name),
                      note: this.i18n.note_queued_to_upload
                  })
              ); 
          }         
    }
    this.fsa.postEvent('file-added', input_file.dom.value);
  },

第三步：其余部分源码添加条件约束(行号看图)

 

 

 

 

 

 注：若不添加条件约束，js会报错，添加的约束，在截图中的行号附近！！！！

演示

创作不易，转载请注明出处，觉得对你有帮助的话，帮忙推荐下，有不懂的地方，欢迎下方留言！~~