JSP实现文件上传下载和删除（附:JS获取上传文件的文件名）

1.文件上传

直接复制项目了，你们有需要的自己看着改吧

表单部分截图  （添加分类按钮可忽略）

jsp页面html部分

<form action="" id="form" enctype="multipart/form-data" method="post"><div style="padding-left: 10%;margin-top: 50px;"><label>文档分类 :  <select name="documentTypeId" id="documentTypeId" style="width: 12%;"><s:iterator value="tDocTypeList"><option value="${docTypeOid}">${docTypeName}</option></s:iterator></select></label><input class="a" type="button" onclick="tjDocType();" style="width:80px;border-radius:7px 7px 7px 7px;background:#009bdf;color:#fff;font-size: 15px;" value="添加分类"></div><div style="padding-left: 10%;margin-top: 20px;"><label>文档标题 :  <input type="text" style="width: 30%;" id="documentName" name="documentName" /></label></div><div style="padding-left: 10%;margin-top: 20px;"><label>文档日期 :  <input onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d'})"name="docTime" id="docTime" value="" type="text"  class="Wdate" readonly="readonly" /></label></div><div style="padding-left: 10%;margin-top: 20px;"><label>文档文件 :  <input type="file" name="path" id="path" /></label></div></form><div style="text-align: center;"><input id="save" class="a" title="保存信息!" style="margin-top:50px;width:120px;border-radius:7px 7px 7px 7px;background:#009bdf;color:#fff;font-size: 17px;" type="button" value="保存" onclick="save();" /></div>

这个是通过点击保存按钮，提交表单实现的下面附按钮点击事件save()

jsp页面js部分

//保存文档function save(){if($("#documentTypeId").val()==""){alert("请选择文档分类！");return;}if($("#documentName").val()==""){alert("请输入文档标题！");return;}if($("#docTime").val()==""){alert("请选择文档日期！");return;}if($("#docPath").val()==""){alert("请选择文件！");return;}$("#form").attr("action", "${ctx}/upload_file.jsp?documentName="+$("#documentName").val()+"&docTime="+$("#docTime").val()+"&documentTypeId="+$("#documentTypeId").val());$("#form").submit();}

这块几个验证，如果有一项为空return，如果都不为空提交表单把需要用到的参数传给upload_file.jsp页面

upload_file.jsp页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ page import="java.util.*,java.io.*"%><%@ page import="java.text.SimpleDateFormat"%><%@ page import="org.apache.commons.fileupload.*"%><%@ page import="org.apache.commons.fileupload.disk.*"%><%@ page import="org.apache.commons.fileupload.servlet.*"%><%@ page import="org.json.simple.*"%><%--文件上传--%><%String documentName = request.getParameter("documentName");//获取URL传过来的NameString docTime = request.getParameter("docTime");//获取URL传过来的timeString path = request.getParameter("path");//获取URL传过来的pathString documentTypeId = request.getParameter("documentTypeId");//获取URL传过来的IDString msg = "";//上传提示信息String docPath = "";//数据库存储路径String rootPath = pageContext.getServletContext().getRealPath("/");//获取当前文件的绝对路径String savePath = "/";HashMap<String, String> extMap = new HashMap<String, String>();extMap.put("file", "doc,docx,pdf,txt,xml,xls,xlsx,xml,ppt,pptx");//设置上传文件到文件夹file下，文件类型只能为doc docx...这几类long maxSize = 1000000000;//设置上传的文件大小最大为1000000000response.setContentType("text/html; charset=UTF-8");//字符编码if(ServletFileUpload.isMultipartContent(request)){File uploadDir = new File(rootPath+savePath);//new一个file 路径为rootPath-savePathif(!uploadDir.isDirectory()){uploadDir.mkdirs();}if(!uploadDir.canWrite()){//上传目录file是否有写入的权限msg = "1";//上传目录没有写权限}else{String dirName = "file";//设置上传目录为fileif(!extMap.containsKey(dirName)){//判断上传目录是否正确msg = "2";//目录名不正确}else{savePath += dirName + "/";File saveDirFile = new File(rootPath+savePath);if (!saveDirFile.exists()) {saveDirFile.mkdirs();}File dirFile = new File(rootPath+savePath);if (!dirFile.exists()) {dirFile.mkdirs();}FileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory);upload.setHeaderEncoding("UTF-8");List items = upload.parseRequest(request);Iterator itr = items.iterator();while (itr.hasNext()) {FileItem item = (FileItem) itr.next();String fileName = item.getName();long fileSize = item.getSize();if (!item.isFormField()) {//检查文件大小if(item.getSize() > maxSize){msg = "3";//上传文件大小超过限制}else{String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){msg = "4";//上传文件扩展名是不允许的扩展名}else{SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;try{File uploadedFile = new File(rootPath+savePath, newFileName);item.write(uploadedFile);docPath = savePath+newFileName;msg = "5";//上传文件成功}catch(Exception e){msg = "6";//上传文件失败}}}}}}}}//可忽略，如果上传文件信息不需要存数据库，只是实现普通的上传文件到这就可以了   如果需要存数据库  把相应信息带到URL传到后台Action存放就可以了response.sendRedirect("./management/document/document!saveDoc.action?documentName="+documentName+"&docTime="+docTime+"&docPath="+docPath+"&documentTypeId="+documentTypeId+"&msg="+msg);%>

2.文件下载

给图片加了个超链接  通过点击图片弹出下载框

图片代码

<a href="${ctx}/download_file.jsp?docPath=${docPath}&docName=${docName}"><%--下载--%><img src="${ctx}/images/u11672.png"></a>

就是很简单的给图片加了个超链接，点击下载跳转页面把需要的信息传到download_file.jsp页面

download_file.jsp页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ page import="java.util.*,java.io.*"%><%@ page import="java.text.SimpleDateFormat"%><%@ page import="com.sun.xml.internal.messaging.saaj.util.ByteOutputStream"%><%@ page import="org.json.simple.*"%><%--文件下载--%><%//得到文件路径(数据库存放路径)String docPath = request.getParameter("docPath");//得到文件名称String docName = request.getParameter("docName");//下载文件名String newName = docName + docPath.substring(docPath.indexOf('.'));//得到文件在服务器中的路径String rootPath = pageContext.getServletContext().getRealPath("/");//清空response 所有信息response.reset();//设置IE浏览器内容类型 表示为 下载response.setContentType("application/x-download;charset=UTF-8");//设置IE浏览器的 头response.setHeader("Content-Disposition","attachment;filename=" + newName);//从服务器上 读取文件File file=new File(rootPath+docPath);response.setContentLength(Integer.valueOf(((Long)file.length()).toString()));//输入流   读取目标文件FileInputStream  fis=new FileInputStream(file);int len=-1;byte[] data=new byte[1024];ByteOutputStream bos=new ByteOutputStream(1024);//文件读到最末尾 返回 -1while((len=fis.read(data))!=-1){//将服务器中的数据 转换成二进制数组 放入内存中bos.write(data,0,len);}//将 服务器上的文件转换成 二进制数组   OutPutStream 输出流 写入对应文件中OutputStream os= response.getOutputStream();//从服务器 拿到数据 向客户端进行写入os.write(bos.getBytes());//清空内存文件 向客户端写入os.flush();//关闭输出流os.close();//注：如果不加out.clear()和out = pageContext.pushBody()这两句，运行后台会打印错误信息//本人也是费了好半天劲才解决，这就直接附上了//希望大家那些报错的小伙伴们少走弯路out.clear();  out = pageContext.pushBody();//关闭输入流fis.close();%>

3.文件删除

老样子，跟下载类似！也是图片加了个超链接

代码

<a href="${ctx}/delete_file.jsp?docPath=${docPath}&docOid=${docOid}"><%--删除--%><img src="${ctx}/images/u11674.png"></a>

点击跳转到delete_file.jsp页面

delete_file.jsp页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ page import="java.util.*,java.io.*"%><%@ page import="java.sql.*"%><%--文件删除--%><%//得到文件路径(数据库存放路径)String docPath = request.getParameter("docPath");//得到文档ID(数据库存放ID)String docOid = request.getParameter("docOid");//得到文件在服务器中的路径String rootPath = pageContext.getServletContext().getRealPath("/");File f = new File(rootPath+docPath);boolean flag=false;if(f.exists()){//如果文件存在删除flag = f.delete();}response.sendRedirect("./management/document/document!deleteDocument.action?docOid="+docOid+"&flag="+flag);%>

到这就实现了！文件上传，下载，删除就实现了！如果是图片，修改文件类型即可

注:因为本人涉及到的项目不光要把文件上传到服务器，还需要把对应一系列信息存入数据库，所有传的参数有些多！大家需要用的话看着改就行了！没必要的参数就不需要传了。

最后给大家附一个小技巧，就是选择文件之后自动获取文件名填入input

直接上图了：

效果大概就是这样的，当选择完文件“QQ截图20170621141936.png”上面文档标题就会自动填入“QQ截图20170621141936”

下面上代码  这块只选取了文档标题跟   文档文件部分代码  要看表单全部代码  到本文最上面看

html代码：

<div style="padding-left: 10%;margin-top: 20px;"><label>文档标题 :  <input type="text" style="width: 30%;" id="documentName" name="documentName" /></label></div><div style="padding-left: 10%;margin-top: 20px;"><label>文档文件 :  <input type="file" name="path" id="path" /></label></div>

JS代码：

$(document).ready(function() {$('#path').change(function () {          var str = $(this).val();          var fileName = getFileName(str);          var fileExt = fileName.substring(0,fileName.lastIndexOf('.'));        $('#documentName').val(fileExt);    });});//获取文件名称  function getFileName(path) {      var pos1 = path.lastIndexOf('/');      var pos2 = path.lastIndexOf('\\');      var pos = Math.max(pos1, pos2);      if (pos < 0) {        return path;    }    else {        return path.substring(pos + 1);    }}

好了，基本就完了！昨天跟今天两天的成果，发出来也是为了方便我自己记忆！