直接上代码:
/**
* 文件输入域控件
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.οnkeydοwn=function(){return false;};
aElement.οnpaste=function(){return false;};
aElement.οnchange=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.οnclick=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);