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属性了, 并且也支持多文件选择上传了