本文详细介绍了如何使用ExtJS4实现文件上传和下载功能，包括前台JavaScript代码、后台Java代码以及相关配置。重点展示了如何利用ExtJS4的组件进行文件上传操作，以及如何处理上传文件的参数传递、文件保存和下载流程。
* Ext上传：
ext文件上传需要扩展控件的支持：
<form id="uploadFileForm" action="" method="post" enctype="multipart/form-data">
<div id="fileupload" style="cursor:hand;"></div>
</form>
1 前台js代码
var uploadForm = new Ext.BasicForm('uploadFileForm');
var fileUploadBt = new Ext.ux.form.FileUploadField({
renderTo: 'fileupload',
buttonOnly: true,
buttonText: 'Excel导入',
buttonCfg: {
iconCls: 'download'
//tooltip: '从Excel导入物料信息'
},
listeners: {
'fileselected': function(fb, v){
//v 为文件路径
if(fac.getValue() == ''){
Ext.Msg.alert('操作提示', '请先选择一个成本中心或填写内部订单号！');
fb.reset();
}else{
indexFun.addMarcFromExcel(v);
}
}
}
});
uploadForm.add(fileUploadBt);
addMarcFromExcel :function(filePath){
uploadForm.submit({
fileUpload: true,
standardSubmit: true,
url: '<c:out value="${path}" />/purchaseApply.htm?method=parseExcel',
params: {
costCenter: costCenter.getValue(),
factNo: costCenterCmbStore.getAt(costCenterCmbStore.find('costNo',costCenter.getValue())).get('factNo'),
internalOrder: internalOrder.getValue()
},
waitMsg: '文件上传中，请等待...',
waitTitle: '上传进度条',
success: function(form,action){
yyExt.info('导入成功', msgContent);
for(var i=0;i<action.result.prdArr.length;i++){
indexFun.insertMarcToGrid(action.result.prdArr[i]);
}
form.reset();
},
failure: function(form, action) {
form.reset();
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('导入失败', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('导入失败', 'Ajax communication failed');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('导入失败', action.result.msg);
}
}
});
}
2 后台java代码：
/**
* org.apache.commons.fileupload.servlet.ServletFileUpload
* 采用apache的ServletFileUpload解析request中的文件，并将文件相关信息封装进一个FileBean对象
*/
FileUploadUtil fileTool = new FileUploadUtil();
fileTool.setServletFileUpload(this.getServletFileUpload());
fileTool.setSizeMax(this.getFileMaxSize());
fileTool.init(request);
fileTool.setSaveFile(false); //上传的文件不保存到硬盘
FileBean fileBean = fileTool.saveFile();
/*
* 提取其他参数
*/
String costCenter = fileTool.getParameter("costCenter"); //成本中心
String factNo = fileTool.getParameter("factNo"); //工厂编号
String internalOrder = fileTool.getParameter("internalOrder"); //内部订单
* Ext下载：Ext没有对下载做任何处理，下载采用一般方式即可。
采用form提交方式：
<form id="queryForm" target="myframe" method="post">
<input type="text" id="marcNo" name="marcNo" style="width: 180px;">
<input type="text" id="marcName" name="marcName" style="width: 100px">
</form>
//导出物料信息
download: function(){
$("queryForm").action = "<c:out value="${path}"/>/marcInfo.htm?method=download";
$("queryForm").submit();
}
后台java代码：
public ModelAndView download(HttpServletRequest request,HttpServletResponse response) throws Exception{
response.setCharacterEncoding(this.DEFAULT_ENCODE);
//取得输出流
OutputStream out = response.getOutputStream();
//清空输出流
response.reset();
try {
/**
* 1 提取条件参数
*/
String marcNo = RequestUtil.getParameter(request, "marcNo", null); //物料编码
String marcName = RequestUtil.getParameter(request, "marcName", null); //品名
//设置响应头和下载保存的文件名
response.setHeader("Content-Type","text/html; charset=UTF-8");
response.setHeader("content-disposition","attachment;filename="+excelModel.getPath());
//定义输出类型
response.setContentType("APPLICATION/msexcel");
/**
* 2 根据条件参数得到相关文件的输出流，将输出流写回前台
*/
} catch (Exception e) {
log.error("下载物料信息出错："+e.getMessage());
}finally{
out.close();
out.flush();
}
return new ModelAndView(this.indexView,"sessionUserName",super.getSessionUser(request).getUserName());
}
*************************************************************************************
/*
*
* This file is part of Ext JS 4
*
* Copyright (c) 2011 Sencha Inc
*
* Contact: http://www.sencha.com/contact
*
* GNU General Public License Usage This file may be used under the terms of the
* GNU General Public License version 3.0 as published by the Free Software
* Foundation and appearing in the file LICENSE included in the packaging of
* this file. Please review the following information to ensure the GNU General
* Public License version 3.0 requirements will be met:
*
* If you are unsure which license is appropriate for your use, please contact
* the sales department at http://www.sencha.com/contact.
*
*/
Ext.require(['Ext.form.field.File', 'Ext.form.Panel', 'Ext.window.MessageBox']);
Ext.onReady(function() {
Ext.define('State', {
extend : 'Ext.data.Model',
autoLoad : false,
fields : [{
type : 'string',
name : 'text'
}, {
type : 'string',
name : 'flag'
}]
});
var store = Ext.create('Ext.data.Store', {
model : "State",
proxy : {
type : "ajax",
url : "./totosea/js/combobox_1.js",
reader : {
type : "json"
}
},
autoLoad : true
});
var upform = Ext.create('Ext.form.Panel', {
renderTo : 'adminfileupdata',
width : 500,
id : "upform",
frame : true,
title : '文件上传',
bodyPadding : '10 10 0',
x : 40,
y : 40,
defaults : {
anchor : '100%',
allowBlank : false,
msgTarget : 'side',
labelWidth : 100
},
items : [{
xtype : 'combobox',
fieldLabel : '文件用途',
emptyText : '请选择文件用途分类',
store : store,
displayField : 'text',
valueField : 'flag',
name : 'flag'
}, {
xtype : 'textfield',
fieldLabel : '自定义文件名称',
emptyText : '请自定义文件名称,必填!',
name : "uplname"
}, {
xtype : 'filefield',
id : 'form-file',
emptyText : '请选择本地文件',
fieldLabel : '上传地址',
name : 'upl',
buttonText : '上传',
buttonConfig : {
iconCls : 'upload-icon'
}
}],
buttons : [{
text : '上传',
handler : function() {
var form = this.up('form').getForm();
if(form.isValid()) {
form.submit({
url : 'uploadAdmin.do',
waitMsg : '正在上传您的文件，请耐心等候...',
success : function(form, action) {
Ext.Msg.alert('提示信息', "文件保存成功");
},
failure : function() {
Ext.Msg.alert("提示信息", "对不起，文件保存失败");
}
});
}
}
}, {
text : '重置',
handler : function() {
this.up('form').getForm().reset();
}
}]
});
});
|
[{
'text': '可执行sql文件(TXT)',
'flag': '1'
}, {
'text': '普通文件',
'flag': '2'
}]
|
/**
* 资源文件上传到服务器
*/
publicvoiduploadAdmin() {
String flag = this.servletRequest.getParameter("flag");
String uplname = this.servletRequest.getParameter("uplname");
String filePath = this.getDocumentAdminPath() + uplFileName;
File file = newFile(filePath);
/**
* 保存文件
*/
ResourceFile a = newResourceFile();
a.setCreateDate(newDate());
a.setContentType(this.uplContentType);
a.setFilePath("/document/admin/"+ uplFileName);
a.setFlag(Integer.parseInt(flag));
a.setExeNumber(0);
a.setExtension(ActionUtil.getExtention(uplFileName).substring(1));
a.setName(uplname);
/**
* 复制文件到磁盘
*/
ActionUtil.copy(upl, file);
try{
this.hibernateService.save(a);
} catch(Exception e) {
e.printStackTrace();
}
/**
* 返回结果
*/
// JSONObject json = new JSONObject();
// json.put("msg", "文件上传成功");
// json.put("success", "true");
// System.out.println(json.toString());
// JsonResult.json(json.toString(), servletResponse);
}
|
<action name="uploadAdmin" class="fileAction" method="uploadAdmin">
<interceptor-ref name="fileUpload">
<param name="allowedTypes"> application/vnd.ms-word, application/vnd.ms-excel, application/pdf, text/plain,application/kswps </param>
<param name="maximumSize">104857600</param>
<param name="savePath">/upload</param>
</interceptor-ref>
<interceptor-ref name="defaultStack" />
<result name="success">${successValue}</result>
<result name="r" type="redirect">${successValue}</result>
</action>
扫一扫
2463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
