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" οnclick="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 οnfοcus="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="保存" οnclick="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传过来的Name
String docTime = request.getParameter("docTime");//获取URL传过来的time
String path = request.getParameter("path");//获取URL传过来的path
String documentTypeId = request.getParameter("documentTypeId");//获取URL传过来的ID
String 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;//设置上传的文件大小最大为1000000000
response.setContentType("text/html; charset=UTF-8");//字符编码

if(ServletFileUpload.isMultipartContent(request)){
	File uploadDir = new File(rootPath+savePath);//new一个file 路径为rootPath-savePath
	if(!uploadDir.isDirectory()){
		uploadDir.mkdirs();
	}
	if(!uploadDir.canWrite()){//上传目录file是否有写入的权限
		msg = "1";//上传目录没有写权限
	}else{
		String dirName = "file";//设置上传目录为file
		if(!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);
//文件读到最末尾 返回 -1
while((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);
    }
}

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