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

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

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

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

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

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

1   this.postEvent = function(event, data)
2   {
3     data = data || null;
4     this.queue.push({event: event, data: data});
5     if (!this.is_processing) {
6       this.process();
7     }
8   }

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

1   this.process = function()
2   {
3     while (this.queue.length > 0) {
4       this.is_processing = true;
5       var event_data = this.queue.shift();
6       this.handler.call(this.scope, event_data.event, event_data.data);
7     }
8     this.is_processing = false;
9   }

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

解决方案部分截图：

源码修改

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

 1     this.input_file = Ext.DomHelper.append(
 2       button_container, 
 3       {
 4         tag: 'input',
 5         type: 'file',
 6         size: 1,
 7         multiple: "multiple",
 8         name: this.input_name || Ext.id(this.el),
 9         style: 'position: absolute; display: block; border: none; cursor: pointer'
10       },
11       true
12     );

第二步：修改添加文件到上传队列源码(大约在源码的第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);
  },