【全网首创】修改 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 > ) {
       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会报错，添加的约束，在截图中的行号附近！！！！

演示

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