2013-07-24 20 views
1

中的FileUploadField中選擇多個文件我正在查看示例here並使用該示例提供的JavaScript here。基本上我想要的是一個獨立的文件選擇器,我可以根據需要選擇儘可能多的文件。我試過的例子有一個獨立的上傳按鈕,但他們不讓我在同一時間突出顯示多個文件。從extjs

此代碼創建按鈕,但我不能在同一時間多個文件加載:

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); 
     } 
    } 
}); 

回答

3

Ext.ux.form.FileUpload使用HTML輸入場設置要上傳的文件,這是非常正常的事情做。

如果您使用的是HTML4,最多隻能將一個文件分配給輸入文件字段。

但是,從HTML5,有a special attribute,您可以設置爲接受多個文件。我有modified the script相應並創建a demo

請注意,HTML5規範仍在草稿中。 Feature compatibility table可以用caniuse.com

+0

謝謝你的非常深入的答案。不幸的是我沒有使用HTML 5,但我已經嘗試在這裏的例子:http://www.rahulsingla.com/blog/2012/03/extjs-3-enabling-multiple-file-uploads-using-textfield和我'能夠用他的代碼做多次上傳。他的代碼的問題是它有一個文本框,出於某種原因,我無法刪除文本框。還有什麼想法?謝謝! – Grammin

+0

@Grammin你提供的例子也使用'multiple'屬性。 –

+0

我重試了一切,這一次讓它工作...非常感謝你的幫助我希望我可以給你多一個upvote。 – Grammin

1

我MultiFileUploadField類:

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); 
    } 
    }); 
    }, 
});