Ext.js多文件選擇上傳,

工作了之后來到了一家用Ext.js的公司, 一開始的時候做項目, 我被分給一個做一個單表的增刪改查, 再加上文件上傳功能, 帶我的老師讓我自己研究一下Ext.js怎么多文件選擇上傳, 並且能獲取到上傳文件的name和各項屬性, 一開始反正很頭疼, 后來知道這個東西其實后來也是把代碼換成了html標簽, 上傳文件的標簽是<input type="file" />, 無奈后來怎么搞也無法傳給后台的servlet, 后來在input標簽上加上了一個name屬性, 便可以正常運行了, 但是這樣直接一個input標簽顯示在Ext里面顯得很奇怪, 然后帶我的老師想開始改一下源碼, 下面才是重點的開始:

先配個input嵌在Ext里面的圖片, 確實顯示不是很好

 

 

然后找到了文件上傳的源碼, 是這個文件

對立面的源碼進行改動一下

改為:

    //Ext中轉換成input標簽的代碼, 改一下屬性, 添加一個multiple屬性
createFileInput : function() {
        if(this.multiple!=null){//做一下判斷
             this.fileInput = this.wrap.createChild({
                id: this.getFileInputId(),
                name: this.name||this.getId(),
                cls: 'x-form-file',
                tag: 'input',
                multiple:'multiple',//在這里添加multiple
                type: 'file',
                size: 1
             });
        }else{
            this.fileInput = this.wrap.createChild({
                id: this.getFileInputId(),
                name: this.name||this.getId(),
                cls: 'x-form-file',
                tag: 'input',
                type: 'file',
                size: 1
            });
        }
    }

設置自動顯示文件名稱

            change: function(){
                //debugger進入調試模式;
                if(this.multiple!=null){
                    var v = this.fileInput.dom.files;
                    var val = '';
                    for( var i=0;i<v.length;i++){
                        if(i==0){
                            val = val+v[i].name;
                        }else{
                            val = val+','+v[i].name;
                        }
                    }
                     this.setValue(val);
                     this.fireEvent('fileselected', this, val);
                }else{
                    var v = this.fileInput.dom.value;
                    this.setValue(v);
                    this.fireEvent('fileselected', this, v);
                }
            }

這樣在前台代碼中就可以直接寫上multiple屬性了, 並且也支持多文件選擇上傳了