ext 文件输入域控件
直接上代码：
/**
?* 文件输入域控件
??? ext 3.0.0
?* 说明:实现了多个文件输入域的自由增删,并带有文件格式,及文件名长度验证功能
?* 使用方法：
?* <div align="left" id="div_bid_affix"></div>
?* new Ext.form.InputField({
??? ??? ??? renderTo : 'div_bid_affix',
??? ??? ??? inputId : 'inData.accessory',
??? ??? ??? alone :true
??? ??? });
?* @version 1.0
?* @author DuanYong
?* @since 2010-11-15
?* @class Ext.form.InputField
?* @extends Ext.BoxComponent
?*/
Ext.form.InputField = Ext.extend(Ext.BoxComponent,? {
??? 'renderTo':'',//组件渲染ID,必填
??? 'inputId':'',//生成的文件输入框的name和id,必填
??? 'addBtnTitle':'',//添加按钮的名称
??? 'types':['txt','pdf','doc','xls','docx','rar','zip','ppt'],//允许的上传类型,数组
??? 'maxFileNameLength':40,//允许的文件名称总长度，默认40
??? 'alone':false,//是否是单个控件，默认多控件
??? 'inputWidth':300,//文件输入框的长度，默认300
??? 'inputHeight':25,//文件输入框的高度，默认25
??? initComponent : function(){
??? ??? Ext.form.InputField.superclass.initComponent.call(this);
??? ??? this.rootDiv = Ext.getDom(this.renderTo);
??? },
??? onRender : function(ct, position){
??? ??? ?Ext.form.InputField.superclass.onRender.call(this, ct, position);
??? ??? ?if(!this.alone){
??? ??? ???? this.initBtn();
??? ??? ?}
??? ??? ?this.createInput();
??? },
??? //private
??? /**
??? ?* 初始化按钮
??? ?*/
??? initBtn : function(){
??? ??? var owner = this;
??? ??? var addBtn=document.createElement("input");
??? ??? addBtn.type="button";
??? ??? addBtn.value=" + "+this.addBtnTitle || '添加';
??? ??? addBtn.onclick = function(){ owner.createInput()};
??? ??? this.addButtonStyle(addBtn);
??? ??? this.rootDiv.appendChild(addBtn);
??? },
??? //private
??? /**
??? ?* 删除文件输入框
??? ?* @param {} DelDivID 待删除文件输入框ID
??? ?*/
??? removeInput : function(DelDivID){
???? ??? this.rootDiv.removeChild(Ext.getDom(DelDivID));
??? },
??? //private
??? /**
??? ?* 创建一个文件输入框
??? ?*/
??? createInput : function(){
??? ??? var owner = this;
??? ??? var x=parseInt(Math.random()*(80-1))+1;
??? ??? var divName=this.inputId+x.toString();//随机div容器的名称
??? ??? var div = document.createElement("div");
??? ??? div.name=divName;
??? ??? div.id=divName;
??? ??? //创建一个文件输入域
??? ??? var aElement = document.createElement("input");
??? ??? aElement.name=this.inputId;
??? ??? aElement.id=this.inputId;
??? ??? aElement.type="file";//设置类型为file
??? ??? aElement.className = "inputFile";
??? ??? //aElement.setAttribute("style","width:"+this.inputWidth+"px;height:"+this.inputHeight+"px");
??? ??? //aElement.setAttribute("size",50);
??? ??? aElement.width = this.inputWidth;
??? ??? aElement.height = this.inputHeight;
??? ??? aElement.onkeydown=function(){return false;};
??? ??? aElement.onpaste=function(){return false;};
??? ??? aElement.onchange=function(){
??? ??? ??? if(!Ext.isEmpty(this.value.replace(/\s*/g,""),false) && !owner.validate(this.value)){
??? ??? ??? ??? owner.removeInput(divName);
??? ??? ??? ??? owner.createInput();
??? ??? ??? }
??? ??? };
??? ??? div.appendChild(aElement);//将input file加入div容器
??? ??? if(!this.alone){
??? ??? ??? //创建一个删除按钮
??? ??? ??? var delBtn=document.createElement("input");
??? ??? ??? delBtn.type="button";
??? ??? ??? delBtn.value=" - 删除";
??? ??? ??? delBtn.height = this.inputHeight;
??? ??? ??? delBtn.onclick=function(){ owner.removeInput(divName)};
??? ??? ??? this.addButtonStyle(delBtn);
??? ??? ??? div.appendChild(delBtn);//将删除按钮加入div容器
??? ??? }
??? ??? this.rootDiv.appendChild(div);//将div容器加入父元素
??? },
??? //private
??? /**
??? ?* 取得文件类型
??? ?* 说明：如果文件路径不为空，则返回文件类型，否则返回空
??? ?* @param {} filePath 文件路径
??? ?* @return {String} 文件类型
??? ?*/
??? getFileType: function(filePath){
??? ??? if(!Ext.isEmpty(filePath,false)){
??? ??? ??? return filePath.substring(filePath.lastIndexOf('.')+1,filePath.length);
??? ??? }
??? ??? return '';
??? },
??? //private
??? /**
??? ?* 取得文件名长度
??? ?* 说明：如果文件路径不为空，则返回文件长度，否则返0
??? ?* @param {} filePath 文件路径
??? ?* @return {String} 文件类型
??? ?*/
??? getFileNameLength: function(filePath){
??? ??? if(!Ext.isEmpty(filePath,false)){
??? ??? ??? return filePath.length - filePath.lastIndexOf("\") - 1;
??? ??? }
??? ??? return 0;
??? },
??? //private
??? /**
??? ?* 文件格式校验
??? ?* @param {} filePath 文件路径
??? ?* 说明：如果指定了文件格式则校验之，否则返回true
??? ?* @return {Boolean} 是否在文件指定的格式中
??? ?*/
??? validate : function(filePath){
??? ??? //文件名长度校验
??? ??? if(!this.checkFileNameLength(filePath)){
??? ??? ??? Msg.error('错误信息提示','文件名称总长度超过:'+this.maxFileNameLength);
??? ??? ??? return false;
??? ??? }
??? ??? //文件格式校验
??? ??? if(!this.checkFileType(this.getFileType(filePath))){
??? ??? ??? Msg.error('错误信息提示','文件类型不正确,允许的文件类型为:'+this.types);
??? ??? ??? return false;
??? ??? }
??? ??? return true;
??? },
??? //private
??? /**
??? ?* 文件格式校验
??? ?* 说明：如果指定了文件格式则校验之
??? ?* @return {Boolean} 是否在文件指定的格式中,存在返回true
??? ?*/
??? checkFileType : function(fileType){
??? ??? if(this.types){
??? ??? ??? var haveType = false;
??? ??? ??? for(var i=0;i<this.types.length;i++){
??? ??? ??? ??? if(this.types[i].toUpperCase() == fileType.toUpperCase()){
??? ??? ??? ??? ??? haveType = true;
??? ??? ??? ??? ??? break;
??? ??? ??? ??? }
??? ??? ??? }
??? ??? ??? return haveType;
??? ??? }
??? ??? return true;
??? }
??? ,
??? //private
??? /**
??? ?* 文件名长度校验
??? ?* 说明：如果指定了文件名长度则校验
??? ?* @return {Boolean} 未超过指定长度 返回TRUE
??? ?*/
??? checkFileNameLength : function(filePath){
??? ??? if(this.maxFileNameLength){
??? ??? ??? return this.getFileNameLength(filePath) <= this.maxFileNameLength ? true : false
??? ??? }
??? ??? return true;
??? }
??? ,
??? //private
??? /**
??? ?* 给按钮添加样式
??? ?* 说明：给按钮添加样式
??? ?* @param {} btn 按钮
??? ?*/
??? addButtonStyle : function(btn){
??? ??? btn.className = 'inputFileBtn_mouseout';
??? ??? btn.onmouseover = function(){ btn.className = 'inputFileBtn_mouseover';};
??? ??? btn.onmouseout = function(){ btn.className = 'inputFileBtn_mouseout';};
??? ??? btn.onmousedown = function(){ btn.className = 'inputFileBtn_mousedown';};
??? ??? btn.onmouseup = function(){ btn.className = 'inputFileBtn_mouseup';};
??? }
???
???
});
//注册xtype
Ext.reg('inputField', Ext.form.InputField);
