Ext多文件上传下载

以下代码为项目应用中整理，仅供参考。

 

一.多文件上传

 

   1.前台Js代码事例 

items : [
	{
		xtype : 'button',
		text : '添加附件',
		iconCls : 'silk_page_add',
		handler : function() {
			Ext.getCmp("upfile").addFile();
		}
	}, {
		xtype : 'multifileupload',
		width : 750,
		allowBlank : false,
		fileConfig : {
			xtype : 'fileuploadfield',
			emptyText : '选择文件上传',
			fieldLabel : '上传文件',
			anchor : '95%',
			buttonCfg : {
				text : '',
				iconCls : 'silk_folder_find'
			}
		},
		id : 'upfile',
		startId : 'post',
		startName : 'post',
		labelWidth : 70,
		limit : 10,
		allowBlank : false
	}
]

 2.后台代码获取上传附件

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
Set<MultipartFile> fileset = new LinkedHashSet<MultipartFile>();
for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {
	String key = (String) it.next();
	MultipartFile file = multipartRequest.getFile(key);
	if (file.getOriginalFilename().length() > 0) {
		fileset.add(file);
	}
}

 注：多附件时可考虑专门建立一个附件表存放附件，在表单提交时需更新附件表，
      同时将多个附件的主键ID以”,”隔开存到主表中。

 

二.多文件展示，下载，删除

 

1.前台Js代码，创建fieldSet

function createDownLoadFieldSet(data,messageId) {
	downLoadFieldSet = new Ext.form.FieldSet({
				title : '附件下载',
				border : true,
				width : '100%',
				layout : 'column',
				autoHeight : true,
				collapsible: true,
				collapsed : true
			});
	// data为附件表的主键ID，多个以;隔开
	var attachUrls = data;
	var attachaUrlArr = attachUrls.split(";");
	attachaUrlArr.pop();
	Ext.each(attachaUrlArr, function(urlid) {
		callBackUrl(urlid,messageId);
	})
}

 2.Js附件展示代码 

 

function callBackUrl(urlid,messageId){
	Ext.Ajax.request({
		url : SMIS.CTX+'/work/post/postListController/getDocumentByUuid.do',
		method : 'POST',
		params : {
			urlId : urlid
		},
		success : function(resp,opt) {
			var doc = Ext.util.JSON.decode(resp.responseText);
			// 附件路径
			var url = doc.attachment
			var pathArr = url.split("/");
			var fileName = pathArr[pathArr.length - 1];
			var temp = downLoadFieldSet.add({
				columnWidth : 1,
				id : url,
				style : {
					padding : '0 0 5 0'
				},
				layout : 'column',
				items : [{
					xtype : 'label',
					width : '45%',
					text : fileName.substring(fileName.
							indexOf("_")+1,fileName.length),
					iconCls : 'silk_application_view_gallery'
				}, {
					xtype : 'label',
					width : '5%'
				}, {
					xtype : 'label',
					width : '25%',
					text : new Date(parseInt(fileName.substring(0,
									fileName.indexOf("_")))).toLocaleString(),
					iconCls : 'silk_application_view_gallery'
				}, {
					xtype : 'button',
					text : '下载附件',
					iconCls : 'silk_application_put',
					handler : function() {
						// Js方法，将URL中的中文进行编码
						url = encodeURI(url); 
						window.open(SMIS.CTX + '/work/post/postListController
									/getAttachment.do?attachmentFile='+ url);
						url = decodeURI(url);
					}
				}, {
					xtype : 'button',
					text : '删除附件',
					iconCls : 'silk_application_put',
					handler : function(){
						removeAttachment(temp,messageId,url);
					}
				}]
			})
		},
		failure : function(){
			Ext.Msg.alert('执行失败',"执行失败！");
		}
	})
}

 

 3.附件移除代码

 

 

function removeAttachment(temp,messageId,url){
	u = encodeURI(url); 
	Ext.Ajax.request({
		url : SMIS.CTX + '/discipline/mechanism/SmisInstitutionController
		/deleteAttachment.do?messageId='+messageId+'&attachmentFile='+u,
		method : 'POST',
		success : function(resp ,action){
			if(Ext.util.JSON.decode(resp.responseText).success){
			Ext.Msg.alert("执行成功",Ext.util.JSON.decode(resp.responseText).msg);
			var newattachments = Ext.getCmp("attachments").getValue()
				.replace(Ext.util.JSON.decode(resp.responseText).documentId,"");
			Ext.getCmp("attachments").setValue(newattachments);
				// 移除附件显示
				downLoadFieldSet.remove(Ext.getCmp(url));
			}else{
			Ext.Msg.alert("执行失败",Ext.util.JSON.decode(resp.responseText).msg);
			}
		},
		failure : function(){
			Ext.Msg.alert("执行失败","执行过程中发生错误！");
		}
	})	
}

 

4.后台代码获取附件进行下载

java.net.URLDecoder.decode(request.getParameter("attachmentFile"),"UTF-8"); 
String attachmentFile = java.net.URLDecoder.decode(
							request.getParameter("attachmentFile"),"UTF-8"); 
response.setContentType("text/html;charset=UTF-8");
try {
	File file = new File(attachmentFile);
	InputStream fis = new BufferedInputStream(new FileInputStream(file));
	byte[] buffer = new byte[fis.available()];
	fis.read(buffer);
	fis.close();
	response.reset();
	response.addHeader("Content-disposition", "attachment;filename=\"" 
			+ new String(file.getName().getBytes("gb2312"), "ISO8859-1"));
	response.addHeader("Content-Length", "" + file.length());
	OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
	toClient.write(buffer);
	toClient.flush();
	toClient.close();
} catch (IOException ex) {
	ex.printStackTrace();
}

 

评论

1 楼 yknife 2011-12-19  

一不小心来到强哥的blog，SMIS哈哈。。