项目需求:使用Ext的FormPanel,在formpanel里面定义一个Ext.ux.form.FileUploadField(由ExtJS官方提供的一个上传组件)。而服务端使用commons-fileupload.jar结合Struts2实现文件上传功能。
commons-fileupload 初始状态下最大上传文件大小为2MB。如需要修改,可在struts.xml文件中添加:
<constant name="struts.multipart.maxSize" value="20971520" />
我这里使用最大上传文件大小为20MB。
现在服务端可以说,已经可以实现上传了。主要在前台客户端。首先定义一个FileUploadField,用于选择上传文件
var fileIO_fileUploadField = new Ext.ux.form.FileUploadField({
id:"fileIO_fileUploadField",
name:"file",
fieldLabel:"上传文件",
buttonText:"浏览...",
allowBlank:false,
emptyText:"小于20MB的文件"
});
之后再FromPanel的items属性中引用,如
var formpanel = new Ext.form.FormPanel({
id:"fileform",
.......//一些关于Formpanel的其他属性
items:[fileIO_fileUploadField,....]})
通过Formpanel提供的submit()方法提交到后台。
这里主要说说,在执行formpanel.form.submit({...})之前,使用JavaScript对上传文件大小的判断,看代码
getBrowserType = function(){
var Sys = {ie:false,firefox:false,chrome:false};
var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE")>=1){
Sys.ie = true;
}else if(ua.indexOf("Firefox")>=1){
Sys.firefox = true;
}else if(ua.indexOf("Chrome")>=1){
Sys.chrome = true;
}
return Sys;
}
getFileSize = function(obj){
var filesize = 0;
// alert(obj.value);
var Sys = getBrowserType();
if(Sys.ie){
//IE7.0、IE8 在上传表单上,显示如“C:\fakepath\[文件名]”
//需要获得正确的文件物理地址value
var value;
var agent = window.navigator.userAgent
// alert(agent.toString());
var IE7 = agent.indexOf("MSIE 7.0") != -1;
var IE8 = agent.indexOf("MSIE 8.0") != -1;
if(IE7 || IE8){
obj.select();
value = document.selection.createRange().text;
}else{
value = Object.value;
var img = new Image();
img.dynsrc = value;
return filesize = img.fileSize;
}
window.oldOnError = window.onerror;
window.onerror = function (err) {
if (err.indexOf('utomation') != -1) {
return filesize = 0;
}
};
var fso = null;
try{
fso = new ActiveXObject('Scripting.FileSystemObject');
var file = fso.GetFile(value);
window.onerror = window.oldOnError;
return filesize = file.Size;
}catch(err){
Ext.Msg.alert("提示","您的IE浏览器暂时不能计算上传的文件大小。请上传小于20MB的文件!" +
"\n\n解决方案:工具——>Internet选项——>安全——>可信站点——>站点,添加本系统站点")
return filesize =0;
}
}else if(Sys.firefox || Sys.chrome){
return filesize = obj.files[0].fileSize;
}else return filesize = 0;
}
附件提供了FileUploadField组件及本实例代码