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传过来的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";//上传文件失败
}
}
}

a73c
}
}
}
}
}

//可忽略，如果上传文件信息不需要存数据库，只是实现普通的上传文件到这就可以了 如果需要存数据库 把相应信息带到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);
}
}

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