附件管理实现过程记录
来源：互联网 发布：kindle oasis 知乎 编辑：程序博客网 时间：2024/05/18 03:34
1.整体功能演示
附件管理包括以下功能：上传附件、删除附件、下载单个文件、打包下载多个文件。全部功能演示如下：
2.程序入口
//打开上传附件界面function selfUploadFile(){var url = "<%=request.getContextPath()%>/scripts/common/document/DocumentList.jsp?fileID=<%=oFile.getFILEID()%>&r="+new Date().getTime();var rtn = window.showModalDialog(url,document,'dialogWidth:650px;dialogHeight:500px;dialogLeft:600px;dialogTop:250px;scroll:no;');}3.界面设计
3.1 带图标按钮，实现绑定点击事件、鼠标进入和离开的样式
4.上传附件功能,实现选择文件后自动上传，并刷新列表界面
目标：为点击按钮，打开文件选择框，选择文件后自动上传，上传结束后，进行提示，并刷新列表界面。
初始设计：一开始，设计为在form表单里放一个隐藏的input type="file"控件，一个“上传”按钮。在“上传”按钮的点击事件里用js调用input type="file"控件的click()事件，弹出文件选择框选择文件后，js提交form表单。结果，一提交，文件框自动清空，后台获取不到提交的文件。经测试，必须手动点击文件框选择文件后提交后台才能获取到文件。
改进设计：在“上传”按钮上放置form表单，表单enctype="multipart/form-data"，表单里放一个input type="file"控件，
设置向左偏移并透明margin-left: -80px;FILTER: alpha(opacity=0)，
文件选择改变后提交表单onchange="document.getElementById('form').submit();"，
后台处理程序保存文件action="<%=request.getContextPath()%>/scripts/common/document/UploadFiles.jsp?referenceID=<%=referenceID%>"
后台保存上传的文件后自动刷新页面String url = request.getHeader("referer");response.sendRedirect(url);
前端代码：
后台处理程序核心代码(UploadFiles.jsp)：
DiskFileItemFactory factory = new DiskFileItemFactory();factory.setSizeThreshold(1024 * 1024 * 20);////设置上传工厂的限制ServletFileUpload upload = new ServletFileUpload(factory);upload.setSizeMax(1024 * 1024 * 20);//设置最大的上传限制List items = upload.parseRequest(request);//处理HTTP请求，items是所有的表单项for(int i =0; i < items.size(); i ++){FileItem fileItem=(FileItem)items.get(i);String name = fileItem.getName();if(name==null || name.trim().length()==0){continue;}name = name.substring(name.lastIndexOf("\\")+1);String title = name.substring(0,name.lastIndexOf('.'));int size = (int)fileItem.getSize();String contentType=fileItem.getContentType();byte[] fileContent=fileItem.get();Attachment attachment = new Attachment();attachment.setFileName(name);attachment.setFileContentType(contentType);attachment.setFileSize(size);attachment.setFileContent(fileContent);attachment.setFileTitle(title);attachment.setReferenceID(referenceID);//attachment.setFileType(fileType);attachment.setUploader(userid);String result = ga.update("xt_document",attachment);}5.ajax实现删除文件，并刷新界面
5.1 台前ajax请求删除
var url = "<%=request.getContextPath()%>/scripts/common/document/DeleteFiles.jsp";$.ajax({ cache: true, type: "POST", dataType:"json", url:url, data:{fileIDs:fileIDs}, async: false, error: function(request) { alert("error"); }, success: function(data) { if(data.code==0) { alert(data.msg); }else { alert(data.msg);reload.href = window.location.href; reload.click(); } } });5.2 后台删除处理程序核心代码(DeleteFiles.jsp)
request.setCharacterEncoding("UTF-8");JSONObject retJson = new JSONObject();String code = "1";String msg = "操作成功";String data = "";String p_userid = (String)session.getAttribute("userid");ICommonServicegd = (ICommonService)ServiceHelper.getService(CommonConstants.COMMON_SERVICE);String fileIDs = StringUtility.toTrimString(request.getParameter("fileIDs"));Set<String> fileIDsSet = new HashSet<String>();try{if(fileIDs!=null && fileIDs.trim().length()>0){ String[] fileIDsArr = fileIDs.split(","); gd.deleteData("XT_Document", "FileID/[@0]", fileIDsArr);}retJson.put("code", code);retJson.put("msg", msg);retJson.put("data", "");out.write(retJson.toString());} catch (Exception e) {e.printStackTrace(System.out);code = "0";msg = e.getMessage();retJson.put("code", code);retJson.put("msg", msg);retJson.put("data", "");out.write(retJson.toString());}5.3 使用JS刷新showModalDialog窗口,JS刷新模式对话框
5.3.1 在showModalDialo窗口的<html>与<Head>之间加上<base target="_self"> ,使这个页面上链接都在本窗口中打开
5.3.2 在页面中加一个隐藏<a>标签，如：<a id="reload" href="" tyle="display:none">reload</a>
5.3.3 在JS中把当前页面的地址赋到<a>的href属性中，执行单击事件。
reload.href = window.location.href ;
reload.click();
说明：reload为定义的<a>标签的ID
6.文件下载功能
6.1 前台调用下载功能js
function downloadAttachment()//下载 { var fileIDs = getSelectedIDs(); if(fileIDs==null || fileIDs=="" || fileIDs==undefined) { alert("请选择记录"); return; } var url = "<%=request.getContextPath()%>/scripts/common/document/DownloadFiles.jsp?fileIDs="+fileIDs; var rtn = window.open(url); } function downloadAllAttachment()//下载全部 { var url = "<%=request.getContextPath()%>/scripts/common/document/DownloadFiles.jsp?referenceID=<%=referenceID%>"; var rtn = window.open(url); }6.1 单个文件下载核心代码(DownloadFiles.jsp)
String fileID = fileIDsSet.iterator().next(); Attachment att = gatt.getAttachment("XT_Document",fileID);String fileName = new String(att.getFileName().getBytes(),"iso-8859-1");byte[] context = att.getFileContent(); //1.设置文件ContentType类型，这样设置，会自动判断下载文件类型 response.setContentType("multipart/form-data"); //2.设置文件头：最后一个参数是设置下载文件名 response.setHeader("Content-Disposition", "attachment;fileName="+fileName); java.io.OutputStream os = response.getOutputStream(); os.write(context); //注意看以下几句的使用 os.flush(); os.close(); response.flushBuffer(); out.clear(); out = pageContext.pushBody();6.2多个文件打包下载核心代码(DownloadFiles.jsp)
response.reset();response.setContentType("application/zip");response.setHeader("Content-Disposition", "attachment;filename=attachment.zip");java.io.OutputStream os = response.getOutputStream();ZipArchiveOutputStream zos = new ZipArchiveOutputStream(os);Iterator<String> it = fileIDsSet.iterator(); while(it.hasNext()) { String fileID = it.next(); Attachment att = gatt.getAttachment("XT_Document",fileID);String fileName = att.getFileName();String fileTitle = att.getFileTitle();byte[] context = att.getFileContent();int fileSize = att.getFileSize();String strFileSize = "";if (fileSize > 1024){strFileSize = fileSize / 1024 + "KB";}else{strFileSize = fileSize + "Byte";}ZipArchiveEntry entry = new ZipArchiveEntry(fileName);zos.putArchiveEntry(entry);zos.write(context);zos.closeArchiveEntry(); }zos.flush();zos.close(); //注意看以下几句的使用 os.flush(); os.close(); response.flushBuffer(); out.clear(); out = pageContext.pushBody();6.3 获取和保存sql server image类型字段值的方法
6.4 servlet下载文件中文文件名无法识别的问题
7.全部代码清单
7.1 DocumentList.jsp
<%@page import="java.text.SimpleDateFormat"%><%@page import="java.text.DateFormat"%><%@page import="com.costech.common.helper.AuthHelper" %><%@page import="com.costech.common.util.StringUtility" %><%@page import="com.costech.common.constants.CommonConstants"%><%@page import="com.costech.common.service.ICommonService"%><%@page import="com.costech.common.helper.ServiceHelper"%><%@page import="com.costech.common.bean.Attachment" %><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");ICommonServicegd = (ICommonService)ServiceHelper.getService(CommonConstants.COMMON_SERVICE);String referenceID = StringUtility.toTrimString(request.getParameter("fileID"));%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>附件管理</title> <base target="_self"> <script src='<%=request.getContextPath() %>/include/jquery-1.11.1.min.js'></script><SCRIPT language=JavaScript src="<%=request.getContextPath()%>/include/list.js"></SCRIPT> <style type="text/css">table{border-right:1px solid #B2CCE5;border-bottom:1px solid #B2CCE5;font-size: 12px;} table th{background-color:#E0EAF7; border-left:1px solid #B2CCE5;border-top:1px solid #B2CCE5;color:#01245E;}table td{border-left:1px solid #B2CCE5;border-top:1px solid #B2CCE5;} </style> <script language="JavaScript" type="text/JavaScript"> function getSelectedIDs() { var fileIDs = ""; var i=0;$("input[name='chxCheckFileID']").each(function(){ var fileID = $(this).val(); if($(this).is(":checked") && fileID !== null && fileID !== undefined && fileID !== '') { if(i==0) { fileIDs = fileID; }else { fileIDs = fileIDs+","+fileID; } i++; } });return fileIDs; } function deleteAttachment(){ var fileIDs = getSelectedIDs(); if(fileIDs==null || fileIDs=="" || fileIDs==undefined) { alert("请选择记录"); return; } if(!confirm("确认要删除？")) { return; } var url = "<%=request.getContextPath()%>/scripts/common/document/DeleteFiles.jsp";$.ajax({ cache: true, type: "POST", dataType:"json", url:url, data:{fileIDs:fileIDs}, async: false, error: function(request) { alert("error"); }, success: function(data) { if(data.code==0) { alert(data.msg); }else { alert(data.msg);reload.href = window.location.href; reload.click(); } } });} function downloadAttachment()//下载 { var fileIDs = getSelectedIDs(); if(fileIDs==null || fileIDs=="" || fileIDs==undefined) { alert("请选择记录"); return; } var url = "<%=request.getContextPath()%>/scripts/common/document/DownloadFiles.jsp?fileIDs="+fileIDs; var rtn = window.open(url); } function downloadAllAttachment()//下载全部 { var url = "<%=request.getContextPath()%>/scripts/common/document/DownloadFiles.jsp?referenceID=<%=referenceID%>"; var rtn = window.open(url); } function allCheckbox_onclick(obj) {$("input[name='chxCheckFileID']").attr("checked",obj.checked); }</script> </head> <body> <div style="width: 100%;height: 20px;background-color: #E0EAF7;"> <button type="button" style="valign: middle;cursor: hand;background-color: transparent; border: 0;"><img src="<%=request.getContextPath() %>/image/common/attach_upload.gif" width="15" height="15" align="absbottom">上传</button> <form id="form" action="<%=request.getContextPath()%>/scripts/common/document/UploadFiles.jsp?referenceID=<%=referenceID%>" method="post" enctype="multipart/form-data" style="display: inline;"> <input type="file" name="fileSelect" id="fileSelect" style="width: 0px;margin-left: -80px;FILTER: alpha(opacity=0);cursor: hand;" onchange="document.getElementById('form').submit();"/> </form> <button type="button" style="valign: middle;cursor: hand;background-color: transparent; border: 0;"onclick="deleteAttachment()" onmouseover="style.backgroundColor='white'" onMouseOut="style.backgroundColor='#E0EAF7'"><img src="<%=request.getContextPath() %>/image/common/attach_delete.gif" width="15" height="15" align="absbottom">删除 </button> <button type="button" style="valign: middle;cursor: hand;background-color: transparent; border: 0;"onclick="downloadAttachment()" onmouseover="style.backgroundColor='white'" onMouseOut="style.backgroundColor='#E0EAF7'"><img src="<%=request.getContextPath() %>/image/common/putintofolder.gif" width="15" height="15" align="absbottom">下载 </button> <button type="button" style="valign: middle;cursor: hand;background-color: transparent; border: 0;"onclick="downloadAllAttachment()" onmouseover="style.backgroundColor='white'" onMouseOut="style.backgroundColor='#E0EAF7'"><img src="<%=request.getContextPath() %>/image/common/putintofolder.gif" width="15" height="15" align="absbottom">下载全部 </button> </div> <div style="height: 98%;OVERFLOW-Y: auto;border: 3px solid #B2CCE5;"> <table style="width: 100%;" cellspacing="0" cellpadding="0"> <thead> <tr> <th style="width:30px;text-align: center;"><input type="checkbox" onclick="allCheckbox_onclick(this)"/></th> <th style="width:30px;">序号</th> <th>文件名</th> <th>文件大小</th> <th>上传人</th> <th>上传时间</th> </tr> </thead> <tbody> <% String sql = "select d.FileID,d.FileName,d.FileSize,d.FileTitle,u.username Uploader,d.UploadDate from XT_Document d " +" left join xt_user u on d.Uploader=u.userid " +" where d.ReferenceID ='" + referenceID + "'"; List list = gd.getDataList(sql, Attachment.class); for(int i=0;i<list.size();i++) { Attachment att = (Attachment)list.get(i); int fileSize = att.getFileSize();String strFileSize = "";if (fileSize>1024*1024){ strFileSize = fileSize/1024/1024 + "M";}else if(fileSize>1024){strFileSize = fileSize/1024 + "KB";}else{strFileSize = fileSize + "Byte";} String uploadDate = ""; if(att.getUploadDate()!=null) { uploadDate = df.format(att.getUploadDate()); } %> <tr onmouseover="style.backgroundColor='#B2CCE5'" onmouseout="style.backgroundColor='<%=(i%2==0?"#FFFFFF":"#ECF6F9")%>'" style="background-color: <%=(i%2==0?"#FFFFFF":"#ECF6F9")%>"> <td style="text-align: center;"><input type="checkbox" name='chxCheckFileID' value="<%=att.getFileID() %>"/></td> <td style="text-align: center;"><%=i+1 %></td> <td><%=att.getFileName() %></td> <td><%=strFileSize %></td> <td><%=att.getUploader() %></td> <td><%=uploadDate %></td> </tr><% } %> </tbody> </table> </div> <a id="reload" href="" tyle="display:none">reload</a> </body></html>7.2 UploadFiles.jsp
<%@page contentType="text/html;charset=utf-8"%><%@ page language="java" import="java.util.List"%><%@ page language="java" import="org.apache.commons.fileupload.*"%><%@ page language="java" import="org.apache.commons.fileupload.disk.*"%><%@ page language="java" import="org.apache.commons.fileupload.servlet.*"%><%@page import="com.costech.common.util.StringUtility"%><%@page import="com.costech.common.helper.AttachmentHelper" %><%@page import="com.costech.common.bean.Attachment" %><%@page import="com.costech.common.service.ICommonService"%><%@page import="com.costech.common.helper.ServiceHelper"%><%@page import="com.costech.common.constants.CommonConstants"%><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><%request.setCharacterEncoding("utf-8");String referenceID = StringUtility.toStringValue(request.getParameter("referenceID"),"");ICommonService gd = (ICommonService)ServiceHelper.getService(CommonConstants.COMMON_SERVICE);AttachmentHelper ga = new AttachmentHelper();String userid = (String)session.getAttribute("userid");try{DiskFileItemFactory factory = new DiskFileItemFactory();factory.setSizeThreshold(1024 * 1024 * 20);////设置上传工厂的限制ServletFileUpload upload = new ServletFileUpload(factory);upload.setSizeMax(1024 * 1024 * 20);//设置最大的上传限制List items = upload.parseRequest(request);//处理HTTP请求，items是所有的表单项for(int i =0; i < items.size(); i ++){FileItem fileItem=(FileItem)items.get(i);String name = fileItem.getName();if(name==null || name.trim().length()==0){continue;}name = name.substring(name.lastIndexOf("\\")+1);String title = name.substring(0,name.lastIndexOf('.'));int size = (int)fileItem.getSize();String contentType=fileItem.getContentType();byte[] fileContent=fileItem.get();Attachment attachment = new Attachment();attachment.setFileName(name);attachment.setFileContentType(contentType);attachment.setFileSize(size);attachment.setFileContent(fileContent);attachment.setFileTitle(title);attachment.setReferenceID(referenceID);//attachment.setFileType(fileType);attachment.setUploader(userid);String result = ga.update("xt_document",attachment);}}catch(Exception e){e.printStackTrace();}String url = request.getHeader("referer");response.sendRedirect(url);%>7.3 DeleteFiles.jsp
<%@page import="java.util.*" %><%@page import="com.costech.common.constants.CommonConstants"%><%@page import="com.costech.common.service.ICommonService"%><%@page import="com.costech.common.helper.ServiceHelper"%><%@page import="com.costech.common.util.StringUtility" %><%@page import="com.costech.common.util.json.JSONObject"%><%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%request.setCharacterEncoding("UTF-8");JSONObject retJson = new JSONObject();String code = "1";String msg = "操作成功";String data = "";String p_userid = (String)session.getAttribute("userid");ICommonServicegd = (ICommonService)ServiceHelper.getService(CommonConstants.COMMON_SERVICE);String fileIDs = StringUtility.toTrimString(request.getParameter("fileIDs"));Set<String> fileIDsSet = new HashSet<String>();try{if(fileIDs!=null && fileIDs.trim().length()>0){ String[] fileIDsArr = fileIDs.split(","); gd.deleteData("XT_Document", "FileID/[@0]", fileIDsArr);}retJson.put("code", code);retJson.put("msg", msg);retJson.put("data", "");out.write(retJson.toString());} catch (Exception e) {e.printStackTrace(System.out);code = "0";msg = e.getMessage();retJson.put("code", code);retJson.put("msg", msg);retJson.put("data", "");out.write(retJson.toString());}%>7.4 DownloadFiles.jsp
<%@page import="java.util.*" %><%@page import="com.costech.common.helper.AuthHelper" %><%@page import="com.costech.common.constants.CommonConstants"%><%@page import="com.costech.common.service.ICommonService"%><%@page import="com.costech.common.helper.ServiceHelper"%><%@page import="com.costech.common.util.StringUtility" %><%@page import="com.costech.common.bean.Attachment" %><%@page import="com.costech.common.component.page.VOPager" %><%@page import="com.costech.common.helper.AttachmentHelper" %><%@pageimport="java.io.BufferedInputStream"%><%@pageimport="java.io.BufferedOutputStream"%><%@pageimport="java.io.File"%><%@page import="java.io.FileInputStream"%><%@pageimport="java.io.FileOutputStream"%><%@pageimport="java.io.IOException"%><%@pageimport="java.io.InputStream"%><%@pageimport="java.io.OutputStream"%><%@pageimport="org.apache.commons.compress.archivers.zip.*"%><%@page import="com.costech.module.hr.chk.util.ContantsAdmin"%><%@ include file="/include/General.jsp" %><%String p_userid = (String)session.getAttribute("userid");ICommonServicegd = (ICommonService)ServiceHelper.getService(CommonConstants.COMMON_SERVICE);AttachmentHelper gatt = new AttachmentHelper();String fileIDs = StringUtility.toTrimString(request.getParameter("fileIDs"));String referenceID = StringUtility.toTrimString(request.getParameter("referenceID"));Set<String> fileIDsSet = new HashSet<String>();if(fileIDs!=null && fileIDs.trim().length()>0){ String[] fileIDsArr = fileIDs.split(","); for(int i=0;i<fileIDsArr.length;i++) { if(fileIDsArr[i]==null || fileIDsArr[i].trim().length()==0) { continue; } fileIDsSet.add(fileIDsArr[i]); }}else if(referenceID!=null && referenceID.trim().length()>0){ String sql = "select FileID from XT_Document where ReferenceID ='" + referenceID + "'"; List list = gd.getDataList(sql, Attachment.class); for(int i=0;i<list.size();i++) { Attachment att = (Attachment)list.get(i); fileIDsSet.add(att.getFileID()); }}else{ return;}try{ if(fileIDsSet.size()==1)//选择一个文件 { String fileID = fileIDsSet.iterator().next(); Attachment att = gatt.getAttachment("XT_Document",fileID);String fileName = new String(att.getFileName().getBytes(),"iso-8859-1");byte[] context = att.getFileContent(); //1.设置文件ContentType类型，这样设置，会自动判断下载文件类型 response.setContentType("multipart/form-data"); //2.设置文件头：最后一个参数是设置下载文件名 response.setHeader("Content-Disposition", "attachment;fileName="+fileName); java.io.OutputStream os = response.getOutputStream(); os.write(context); //注意看以下几句的使用 os.flush(); os.close(); response.flushBuffer(); out.clear(); out = pageContext.pushBody(); }else if(fileIDsSet.size()>1)//选择多个文件，则打包下载 { response.reset();response.setContentType("application/zip");response.setHeader("Content-Disposition", "attachment;filename=attachment.zip");java.io.OutputStream os = response.getOutputStream();ZipArchiveOutputStream zos = new ZipArchiveOutputStream(os);Iterator<String> it = fileIDsSet.iterator(); while(it.hasNext()) { String fileID = it.next(); Attachment att = gatt.getAttachment("XT_Document",fileID);String fileName = att.getFileName();String fileTitle = att.getFileTitle();byte[] context = att.getFileContent();int fileSize = att.getFileSize();String strFileSize = "";if (fileSize > 1024){strFileSize = fileSize / 1024 + "KB";}else{strFileSize = fileSize + "Byte";}ZipArchiveEntry entry = new ZipArchiveEntry(fileName);zos.putArchiveEntry(entry);zos.write(context);zos.closeArchiveEntry(); }zos.flush();zos.close(); //注意看以下几句的使用 os.flush(); os.close(); response.flushBuffer(); out.clear(); out = pageContext.pushBody(); }} catch (Exception e) {e.printStackTrace(System.out);} finally {}%> 0 0
- 附件管理实现过程记录
- c# 上传附件记录
- wordpress权限管理、附件管理
- Android彩信加载附件过程
- 利用存储过程实现记录集循环
- iOS消息推送实现过程记录
- iOS消息推送实现过程记录
- 转：iOS消息推送实现过程记录
- Xcode6.1.1消息推送实现过程记录
- iOS消息推送实现过程记录
- 法线纹理实现过程问题记录
- TRQ-K3报表需求实现过程记录
- 上传附件的实现
- 实现上传附件
- .net附件接口实现
- 附件上传模块实现
- Android实现附件预览
- MaximoV7 附件管理配置说明
- Android xml中tools命名空间用途示例
- servletContext接口
- centos7下安装mariadb
- 日历插件
- maven 项目引入本地jar包
- 附件管理实现过程记录
- CS0117号错误是什么
- ros wiki learning
- （转）深度长文 Tensorflow代码解析（一）
- 学习java并发，先了解java内存模型
- 【文件格式-TIFF】Tiff Tag List （标签列表）
- MySQL双机热备
- codeforces 768 C Jon Snow and his Favourite Number(循环节）
- merge的典型使用
