1

我正在查看此处的示例并使用此处示例中提供的javascript。基本上我想要的是一个独立的文件选择器，我可以选择任意数量的文件。我尝试过的示例有一个独立的上传按钮，但它们不允许我同时移动突出显示多个文件。

此代码创建按钮，但我无法同时加载多个文件：

var addFilesButton = new Ext.ux.form.FileUploadField({
    buttonText: 'Add Files...',
    buttonOnly: true,
    listeners: {
        'fileselected': function(fb, v){
          var Record = myGrid.getStore().recordType;
          var newFile = new Record({
            fileName:       v,
            type:           'src',
            version:        '5.9',
          });

          myGrid.stopEditing();
          myGrid.getStore().add(newFile);
          myGrid.startEditing(0, 0);
        }
    }
});
4

2 回答 2

3

Ext.ux.form.FileUpload使用HTML INPUT字段来设置要上传的文件，这是很正常的事情。

如果您使用的是 HTML4，则最多可以将一个文件分配给输入文件字段。

但是，从HTML5开始，您可以设置一个特殊属性来接受多个文件。

我已经相应地修改了脚本并创建了一个演示。

请注意，HTML5 规范仍在草稿中。caniuse.com上提供了功能兼容性表

于 2013-07-25T00:43:35.650 回答
1

My MultiFileUploadField class:

MultiFileUploadField = Ext.extend(Ext.ux.form.FileUploadField, {
  multiple: false,

  createFileInput: function() {
    this.fileInput = this.wrap.createChild({
      id: this.getFileInputId(),
      name: this.name||this.getId(),
      cls: 'x-form-file',
      tag: 'input',
      type: 'file',
      size: 1
    }); 

    if(this.multiple){
      this.fileInput.dom.setAttribute('multiple', 'multiple');
    }   
  },  

 bindListeners: function(){
   this.fileInput.on({
     scope: this,
     mouseenter: function(){
       this.button.addClass(['x-btn-over','x-btn-focus'])
     },  
     mouseleave: function(){
       this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
     },  
     mousedown: function(){
       this.button.addClass('x-btn-click')
     },  
     mouseup: function(){
       this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
     },  
     change: function(){
       var v = this.fileInput.dom.files;
       this.setValue(v);
       this.fireEvent('fileselected', this, v); 
     }   
   }); 
  },  
});
于 2013-07-26T14:35:54.137 回答