extjs3.2+struts1.2实现文件上传。

探讨了使用ExtJS框架实现文件上传功能时遇到的问题,包括表单配置、文件读取及后端处理等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ext form表单代码:



var addDoc = new Ext.FormPanel({
baseCls: 'x-plain',
autoWidth: false,
labelWidth: 100,
labelAlign : 'right',
bodyStyle : 'padding-top:5px',
defaultType: 'textfield',
defaultWidth: '150',
items:[{
fieldLabel: '*主题名称',
id: 'theme',
anchor: '90%',
name: 'theme',
maxLength: 100,
maxLengthText: '长度不能超过100个字符',
minLength: 2,
minLengthText: '长度不能小于2个字符',
allowBlank: false,
blankText: '请输入模块名称'
},{
xtype: 'datefield',
fieldLabel: '*截止日期',
id: 'expireTime',
anchor: '90%',
name: 'expireTime',
format: 'Y-m-d',
allowBlank: false,
blankText: '请选择截止日期'
},{
fieldLabel: '创建者',
id: 'person1',
anchor: '90%',
name: 'person1',
value: '${LOGIN.person.name}',
maxLength: 20,
maxLengthText: '长度不能超过20个字符',
minLength: 2,
minLengthText: '长度不能小于2个字符',
allowBlank: false
},{
xtype: 'textarea',
anchor: '90%',
id: 'description',
name: 'description',
maxLength: 200,
maxLengthText: '长度不能超过200个字符',
fieldLabel: '主题描述',
height:30,
anchor: '90%' // anchor width by percentage and height by raw adjustment

},{
id: 'docType1',
anchor: '90%',
fieldLabel: '附件类型',
name: 'docType1',
xtype: 'combo',
bodyStyle: 'padding:10px;',
valueField: "value",
emptyText: '请选择附件类型',
blankText: '请输入附件类型',
displayField: "text",
allowBlank: false,
store:new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [['1','Word主题'],['xls','Excel主题'],['jpg','JPG图片'],['jpeg','JPEG图片'],['gif','GIF图片'],['bmp','BMP图片'],['7','视频图像']]
}),
mode: 'local'

},{
fieldLabel: '*上传附件(2M)',
id: 'file-file',
name: 'file',
itmesCls: 'float-left',
clearCls: 'allow-foat',
//fileUpload : true, // 指定表单将要进行文件上传
anchor: '90%',
xtype: 'textfield',
inputType: 'file',//输入类型
listeners:{
blur:function(){
var file_upl = document.getElementById('file-file');
file_upl.select();
var filePath = document.selection.createRange().text; //获取上传文件路劲
if(filePath!=""){
var path_name=filePath.substr(filePath.lastIndexOf("\\")+1,filePath.length-1);//获取上传文件名
var fileType=filePath.substr(filePath.lastIndexOf(".")+1,filePath.length-1);//获取上传文件类型
var doc_type= Ext.getCmp("docType1").getValue(); //获取上传文件类型
if(doc_type==1){
if(fileType.toLowerCase() !="doc" && fileType.toLowerCase()!="docx"){
Ext.Msg.alert("提示信息"," 上传文件格式不正确");
return;
}
}
if(doc_type!=1 && doc_type!=7){
if(fileType.toLowerCase() !=doc_type){
Ext.Msg.alert("提示信息"," 上传文件格式不正确");
return;
}
//未验证视频格式

}
Ext.getCmp("accessory1").setText("<font color='red'>"+path_name+"</font>",false); //模板文件名称赋值
Ext.getCmp("accessory").setValue(path_name); //模板文件名称赋值
Ext.getCmp("docType").setValue(doc_type); //模板文件类型赋值
Ext.getCmp("file").setValue(filePath); //模板文件类型赋值


}
}

}

},{
xtype: 'label',
fieldLabel: '模板文件',
id: 'accessory1',
anchor: '90%',
name: 'accessory1',
allowBlank: false
}, {
xtype: 'radiogroup',
fieldLabel: '公开/私密',
anchor: '60%',
name: 'rbauto',
items: [
{boxLabel: '公开', name: 'rbauto', inputValue: 1},
{boxLabel: '私密', name: 'rbauto', inputValue: 0, checked: true}
]
},{
//隐藏文本框赋值,上传文件类型

id: 'docType',
hidden: true,
name: 'docType'

},{
//隐藏文本框赋值,上传文件名

id: 'accessory',
hidden: true,
name: 'accessory'

},{
//隐藏文本框赋值,用户ID

id: 'person',
hidden: true,
name: 'person',
value: '${LOGIN.id}'

}],

buttons: [{
text: '保存',
handler:function(){
if(addDoc.form.isValid()){
Ext.MessageBox.show({
title: '提示',
msg: '正在保存...',
progressText: '',
width: 300,
progress: true,
closable: false,
animEl: 'loding'
});
var f = function(v){
return function(){
var i = v/11;
Ext.MessageBox.updateProgress(i, '');
};
};

for(var i = 1; i < 13; i++){
setTimeout(f(i), i*150);
}

addDoc.form.doAction('submit',{
url:'docSendManager.do?method=saveAndUpdateDoc',
method:'post',
success:function(form,action){
if (action.result.msg=='ok') {
addDoc.form.reset();
addDocWindow.hide();
Ext.MessageBox.hide();
Ext.Msg.alert('操作提示',"保存成功");
reloadTreeAndGrid();
} else {
Ext.Msg.alert('操作提示',action.result.msg);
}
},
failure:function(){
Ext.Msg.alert('操作提示','服务器错误,请稍后再试...');
}
});
}
}

},{
text: '重置',
handler:function(){addDoc.form.reset();}
}

]
});


actionfrom部分代码:


/**
* 稿件模板附件引用相对路径
*
* @hibernate.property
*/
private FormFile file;

private String expireTime;//截止时间

private String description;// 主题描述

private String rbauto;//公开/私密状态

private String person; //用户


public FormFile getFile() {
return file;
}

public void setFile(FormFile file) {
this.file = file;
}

public String getPerson() {
return person;
}

public void setPerson(String person) {


action部分代码

public ActionForward saveAndUpdateDoc(ActionMapping mapping,
ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception {
response.setContentType("text/html");
// 设置字符编码为UTF-8, 这样支持汉字显示
response.setCharacterEncoding("UTF-8");

FileManagerForm fileManager = (FileManagerForm) form;
FormFile pfile = fileManager.getFile();//获取文件路径
String docName=fileManager.getTheme();//主题名
String endTime=fileManager.getExpireTime();// 截止日期
String dec=fileManager.getDescription();//描述
String doctype=fileManager.getDocType();//附件类型
String accessory=fileManager.getAccessory();//附件名称
int rbauto=Integer.parseInt(fileManager.getRbauto());//公开/私密
int person=Integer.parseInt(fileManager.getPerson());// 用户ID
System.out.println("文件路径:"+pfile);
System.out.println("主题名:"+docName);
System.out.println("截止日期:"+endTime);
System.out.println("描述:"+dec);
System.out.println("附件类型:"+doctype);
System.out.println("附件名称:"+accessory);
System.out.println("公开/私密"+rbauto);
System.out.println("用户ID"+person);

Object logger;

FormFile file = fileManager.getFile();
String tmpFolder = "";
String extName = "";
String fullPath = "";

if (null != file && !"".equals(file.getFileName())) {
String contentType = file.getContentType();

String size = (file.getFileSize() + "bytes");
String fileName = file.getFileName();
extName = fileName.split("\\.")[1];
tmpFolder = String.valueOf(System.currentTimeMillis());
fullPath = "/photo/templates/" + tmpFolder + "/" + fileName;

try {
String filePath = "";// 取当前系统路径
if (new File("d:\\photo").isDirectory()) {
filePath = "d:\\";
} else {
filePath = request.getRealPath("/");
}
File mDir = new File(filePath + "/photo/templates/"
+ tmpFolder);
if (!mDir.isDirectory()) {
mDir.mkdirs();
}

InputStream stream = file.getInputStream();
ByteArrayOutputStream baos = new ByteArrayOutputStream();
OutputStream bos = new FileOutputStream(filePath + fullPath);
int bytesRead = 0;
byte[] buffer = new byte[8192];
while ((bytesRead = stream.read(buffer, 0, 8192)) != -1) {
bos.write(buffer, 0, bytesRead);// 将文件写入服务器
}
bos.close();
stream.close();
} catch (Exception e) {
log.error("上传出现异常");
}


打印结果::

文件路径:null
主题名:111111
截止日期:2012-03-17
描述:1111111
附件类型:1
附件名称:四川电大毕业设计.doc
公开/私密0
用户ID2026


请问。。为什么file为null呀??

我换成File接收也是null、。、

网上查说将:fileUpload : true

但是这样也不行。。。

在aip中,也没有找到fileUpload 属性

还有的说将:xtype:'uploadPanel'

同样,,在3.2的api中也xtype没有发现有这个属性。

请问应该怎么样,才能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值