extjs中，通过将Ext.form.Field设置成inputType:'file',可实现文件上传功能，但是样式不能修改，如以下代码：
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 80,
url:'upfile.asp',
fileUpload:true,
defaultType: 'textfield',
items: [{
xtype: 'textfield',
fieldLabel: '文件名称',
name: 'userfile',
inputType: 'file',
allowBlank: false,
blankText: '文件名称不能为空.',
anchor: '90%' // anchor width
by percentage
}]
});
不过，extjs中有插件可以实现样式修改，插件存放在examples\ux\fileuploadfield目录下
直接引用js文件FileUploadField.js和对应的css文件fileuploadfield.css即可
笔者以以下代码示例，演示上传功能：
一、客户端JS代码（部分）
function Addfiles()
{
var FileRname=new Ext.form.TextField(
{
name:'FileRname',
fieldLabel:'文件名',
allowBlank:false,
emptyText:'发布用于显示的文件名',
anchor:'95%'
});
var AddfileForm=new Ext.FormPanel(
{
name:'AddfileForm',
frame:true,
labelWidth:90,
url:'UploadFiles.asp',
fileUpload:true,
width:420,
autoDestroy:true,
bodyStyle:'padding:0px 10px 0;',
items:[
{
xtype:'radiogroup',
fieldLabel:'文件类别',
items:[
{
boxLabel:'专用通知',name:'FileItype',inputValue:1,checked:true
},
{
boxLabel:'专题报告',name:'FileItype',inputValue:2
},
{
boxLabel:'会议纪要',name:'FileItype',inputValue:3
}
]
},
{
xtype:'datefield',
name:'Filedate',
format:'Y-n-j',
fieldLabel:'发布日期'
},
{
xtype:'textfield',
name:'FileNum',
fieldLabel:'文件编号',
allowBlank:false,
emptyText:'部门文件编号',
anchor:'95%'
},
{
xtype:'textfield',
name:'KeyWord',
fieldLabel:'关键词',
allowBlank:false,
emptyText:'查询使用时的关键词',
anchor:'95%'
},
{
xtype:'combo',
name:'FileUnit',
store:new Ext.data.JsonStore(
{
autoLoad:true,
method:'GET',
url:"data/zlbunit.json",
fields:['FileUnit']
}),
mode:'local',
triggerAction:'all',
hideTrigger:false,
allowBlank:false,
displayField:'FileUnit',
valueField:'FileUnit',
emptyText:'发布文件部门',
fieldLabel:'发布文件部门',
editable:false,
anchor:'95%'
},
{
xtype:'fileuploadfield',
emptyText:'选择上传文件',
fieldLabel:'文件',
name:'upfile',
buttonText:'',
anchor:'95%',
buttonCfg:
{
iconCls:'icon_upfile'
},
listeners:
{
'fileselected':function (fb,v)
{
var temp=v.replace(/^.*(\.[^\.\?]*)\??.*$/,'$1');
var temp1=temp.toLocaleLowerCase()
if(allowfiletype.indexOf(temp1)==-1)
{
Ext.Msg.alert("错误","不允许选择该类型文件，请重新选择！");
fb.setValue("");
FileRname.setValue("");
}else
{
FileRname.setValue(v.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1"));
}
}
}
},FileRname,
{
xtype:'textarea',
name:'Filedetail',
fieldLabel:'简要说明',
height:70,
anchor:'95%'
}
]
});
var AddfileWin=new Ext.Window(
{
name:'AddfileWin',
width:'450',
height:'340',
layout:'fit',
closeAction:'close',
title:'增加文件',
buttonAlign:'center',
resizable:false,
modal:true,
autoDestroy:true,
items:AddfileForm,
buttons:[
{
text:'保存',
handler:function ()
{
if(AddfileForm.getForm().isValid())
{
Ext.MessageBox.show(
{
title:'请稍等...',
msg:'文件上传中...',
progressText:'',
width:300,
progress:true,
closable:false,
animEl:'loding'
});
AddfileForm.getForm().submit(
{
success:function (form,action)
{
var Result=action.result.flag;
if(Result!=0)
{
Ext.MessageBox.alert("提示",action.result.message);
}else if(Result==0)
{
Ext.MessageBox.alert("提示",action.result.message);
ds.load(
{
params:
{
start:start,
limit:limit
}
});
AddfileForm.getForm().reset();
}
},
failure:function (form,action)
{
Ext.MessageBox.alert("提示","服务器请求错误,请稍后再试！");
}
})
}
}
},
{
text:'重置',
handler:function ()
{
AddfileForm.getForm().reset();
}
},
{
text:'关闭',
handler:function ()
{
AddfileWin.close();
}
}]
});
AddfileWin.show();
}
二、服务器端代码：
<!--#include
file="conn.asp"-->
<!--#include file="INC/Function.asp"
-->
<!--#include
file="upload_5xsoft.inc"-->
<%
Dim
FileCtype,FileItype,Filename,FileType,FileImg,FileSize,KeyWord,FileUnit,Filedetail,Filepath,FileRname,Filedate,ServerPath,FileExt,SaveDbFileName,backfilename,Sql
response.charset = "utf-8"
Set upload = New upload_5xsoft
Set File = upload.File("upfile")
FileUnit =upload.Form("FileUnit")
KeyWord=upload.Form("KeyWord")
Filedate=upload.Form("Filedate")
FileNum=upload.Form("FileNum")
FileItype=upload.Form("FileItype")
FileUnit=upload.Form("FileUnit")
Filedetail=upload.Form("Filedetail")
FileRname=upload.Form("FileRname")
FileCtype=10
If File.fileSize>0 Then
FSPath
= CreateuploadPath("UploadFile/FileManagement", 4, Date())
ServerPath =
Server.MapPath(FSPath)&"\"
FileExt
= File.FileExt
FileSize = File.FileSize
FileName = GetRndFileName(FileExt)
SaveDbFileName=FileName
backfilename = FSPath + FileName
Filename =
ServerPath&FileName
File.SaveAs Filename
Set
File = Nothing
Set
upload = Nothing
Sql = "insert into FileManager
(FileCtype,FileItype,FileNum,Filename,FileType,FileImg,FileSize,KeyWord,FileUnit,Filedetail,Filepath,FileRname,Filedate,FileInputDate)
values("&FileCtype&",'"&FileItype&"','"&FileNum&"','"&SaveDbFileName&"','"&FileExt&"','"&FileExt&".gif"&"',"&Int(FileSize)&",'"&KeyWord&"','"&FileUnit&"','"&Filedetail&"','"&backfilename&"','"&FileRname&"','"&Filedate&"',date())"
conn.Execute(SQL)
Set
Conn = Nothing
response.Write
"{success:true,flag:0,message:'文件增加成功！'}"
Else
Set
File = Nothing
Set
upload = Nothing
response.Write
"{success:false,flag:1,message:'数据执行存储业务发生错误'}"
End If
%>
