文件上传和下载在web应用中非常普遍，要在jsp环境中实现文件上传功能是非常容易的，因为网上有许多用java开发的文件上传组件，本文以commons-fileupload组件为例，为jsp应用添加文件上传功能。common-fileupload组件是apache的一个开源项目之一，可以从http://jakarta.apache.org/commons/fileupload/下载。用该组件可实现一次上传一个或多个文件，并可限制文件大小。
开发环境
创建一个javaweb项目，加入common-fileupload组件（commons-fileupload-1.3.1.jar，commons-io-2.4.jar）
文件上传
- 文件上传界面，upload.jsp
-
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>文件上传</title> </head> <body> <form action="${pageContext.request.contextPath }/upload" enctype="multipart/form-data" method="post"> 上传用户：<input type="text" name="username"><br/> 上传文件1:<input type="file" name="file1"><br/> 上传文件2:<input type="file" name="file2"><br/> <input type="submit" value="提交"> </form> </body> </html>
- 消息提示界面，message.jsp
-
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>消息提示</title> </head> <body> ${message } </body> </html>
- 接受文件上传servlet，UploadServlet.java
-
package com.servlet; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.UUID; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileUploadBase.FileSizeLimitExceededException; import org.apache.commons.fileupload.ProgressListener; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; public class UploadServlet extends HttpServlet { private static final long serialVersionUID = 1L; // 定义允许上传的文件扩展名 private String Ext_Name = "gif,jpg,jpeg,png,bmp,swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb,doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 得到上传文件的保存目录，将上传文件存放在WEB-INF目录下，不允许外界直接访问，保证上传文件的安全 String savePath = this.getServletContext().getRealPath("WEB-INF/upload"); File saveFileDir = new File(savePath); if (!saveFileDir.exists()) { // 创建临时目录 saveFileDir.mkdirs(); } // 上传时生成临时文件保存目录 String tmpPath = this.getServletContext().getRealPath("WEB-INF/tem"); File tmpFile = new File(tmpPath); if (!tmpFile.exists()) { // 创建临时目录 tmpFile.mkdirs(); } // 消息提示 String message = ""; try { // 使用Apache文件上传组件处理文件上传步骤： // 1.创建一个DiskFileItemFactory工厂 DiskFileItemFactory factory = new DiskFileItemFactory(); // 设置工厂的缓冲区的大小，当上传的文件大小超过缓冲区的大小时，就会生成一个临时文件存放到指定的临时目录当中 factory.setSizeThreshold(1024 * 10);// 设置缓冲区的大小为100KB，如果不指定，那么默认缓冲区的大小是10KB // 设置上传时生成的临时文件的保存目录 factory.setRepository(tmpFile); // 2.创建一个文件上传解析器 ServletFileUpload upload = new ServletFileUpload(factory); // 监听文件上传进度 upload.setProgressListener(new ProgressListener() { @Override public void update(long readedBytes, long totalBytes, int currentItem) { // TODO Auto-generated method stub System.out.println("当前已处理：" + readedBytes + "-----------文件大小为：" + totalBytes + "--" + currentItem); } }); // 解决上传文件名的中文乱码问题 upload.setHeaderEncoding("UTF-8"); // 3.判断提交上来的数据是否是上传表单的数据 if (!ServletFileUpload.isMultipartContent(request)) { // 按照传统方式获取数据 return; } // 设置上传单个文件的最大值 upload.setFileSizeMax(1024 * 1024 * 1);// 1M // 设置上传文件总量的最大值，就是本次上传的所有文件的总和的最大值 upload.setSizeMax(1024 * 1024 * 10);// 10M List items = upload.parseRequest(request); Iterator itr = items.iterator(); while (itr.hasNext()) { FileItem item = (FileItem) itr.next(); // 如果fileitem中封装的是普通的输入想数据 if (item.isFormField()) { String name = item.getFieldName(); // 解决普通输入项数据中文乱码问题 String value = item.getString("UTF-8"); // value = new String(value.getBytes("iso8859-1"),"UTF-8"); System.out.println(name + "=" + value); } else// 如果fileitem中封装的是上传文件 { // 得到上传文件的文件名 String fileName = item.getName(); System.out.println("文件名：" + fileName); if (fileName == null && fileName.trim().length() == 0) { continue; } // 注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的 // 如: C:UsersH__DDesktop1.txt 而有些则是 ： 1.txt // 处理获取到的上传文件的文件名的路径部分，只保留文件名部分 fileName = fileName.substring(fileName.lastIndexOf("\") + 1); // 得到上传文件的扩展名 String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase(); // 检查扩展名 // 如果需要限制上传的文件类型，那么可以通过文件的扩展名来判断上传的文件类型是否合法 System.out.println("上传的文件的扩展名是：" + fileExt); if(!Ext_Name.contains(fileExt)){ System.out.println("上传文件扩展名是不允许的扩展名：" + fileExt); message = message + "文件：" + fileName + "，上传文件扩展名是不允许的扩展名：" + fileExt + "<br/>"; break; } // 检查文件大小 if(item.getSize() == 0) continue; if(item.getSize() > 1024 * 1024 * 1){ System.out.println("上传文件大小：" + item.getSize()); message = message + "文件：" + fileName + "，上传文件大小超过限制大小：" + upload.getFileSizeMax() + "<br/>"; break; } // 得到存文件的文件名 String saveFileName = makeFileName(fileName); //保存文件方法一// 获取item中的上传文件的输入流 InputStream is = item.getInputStream(); //创建一个文件输出流 FileOutputStream out = new FileOutputStream(savePath + "\" + saveFileName); //创建一个缓冲区 byte buffer[] = new byte[1024]; //判断输入流中的数据是否已经读完的标致 int len = 0; while((len = is.read(buffer)) > 0){ out.write(buffer, 0, len); } //关闭输出流 out.close(); //关闭输入流 is.close(); //删除临时文件 item.delete(); message = message + "文件：" + fileName + "，上传成功<br/>"; //保存文件方法二 // File uploadedFile = new File(savePath, saveFileName); // item.write(uploadedFile); } } } catch (FileSizeLimitExceededException e) { message = message + "上传文件大小超过限制<br/>"; e.printStackTrace(); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } finally { request.setAttribute("message", message); request.getRequestDispatcher("/message.jsp").forward(request, response); } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } private String makeFileName(String fileName) { // 为防止文件覆盖的现象发生，要为上传文件产生一个唯一的文件名 return UUID.randomUUID().toString().replaceAll("-", "") + "_" + fileName; } }
- web.xml配置servlet。web.xml
-
<servlet> <servlet-name>UploadServlet</servlet-name> <servlet-class>com.servlet.UploadServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>UploadServlet</servlet-name> <url-pattern>/upload</url-pattern> </servlet-mapping> - 演示效果
文件下载
- 浏览文件界面。listFile.jsp
-
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>下载文件显示页面</title> </head> <body> <!-- 遍历Map集合 --> <c:forEach var="me" items="${fileNameMap}"> <c:url value="/download" var="downurl"> <c:param name="filename" value="${me.key}"></c:param> </c:url> ${me.value}<a href="${downurl}">下载</a> <br /> </c:forEach> </body> </html>
- 查询文件servlet。ListFileServlet.java
-
package com.servlet; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ListFileServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取上传文件的目录 String uploadFilePath = this.getServletContext().getRealPath("/WEB-INF/upload"); // 存储要下载的文件名 Map<String, String> fileNameMap = new HashMap<String, String>(); // 递归遍历filepath目录下的所有文件和目录，将文件的文件名存储到map集合中 listFile(new File(uploadFilePath), fileNameMap);// File既可以代表一个文件也可以代表一个目录 // 将Map集合发送到listfile.jsp页面进行显示 request.setAttribute("fileNameMap", fileNameMap); request.getRequestDispatcher("/listFile.jsp").forward(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } /** * 递归遍历指定目录下的所有文件 * @param file * @param map */ public void listFile(File file, Map<String, String> map) { if(file == null) return; // 如果file代表的不是一个文件，而是一个目录 if (!file.isFile()) { // 列出该目录下的所有文件和目录 File files[] = file.listFiles(); if(files == null) return; // 遍历files[]数组 for (File f : files) { // 递归 listFile(f, map); } } else { String realName = file.getName().substring(file.getName().indexOf("_") + 1); // file.getName()得到的是文件的原始名称，这个名称是唯一的，因此可以作为key，realName是处理过后的名称，有可能会重复 map.put(file.getName(), realName); } } }
- 查询servlet的web.xml配置，web.xml
-
<servlet> <servlet-name>ListFileServlet</servlet-name> <servlet-class>com.servlet.ListFileServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ListFileServlet</servlet-name> <url-pattern>/listFile</url-pattern> </servlet-mapping> - 下载servlet，DownloadServlet.java
-
package com.servlet; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.OutputStream; import java.net.URLEncoder; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class DownloadServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 得到要下载的文件名 String fileName = request.getParameter("filename"); // 2323928392489-美人鱼.avi fileName = new String(fileName.getBytes("iso8859-1"), "UTF-8"); // 上传的文件都是保存在/WEB-INF/upload目录下的子目录当中 String fileSaveRootPath = this.getServletContext().getRealPath("/WEB-INF/upload"); // 得到要下载的文件 File file = new File(fileSaveRootPath + "\" + fileName); // 如果文件不存在 if (!file.exists()) { request.setAttribute("message", "您要下载的资源已被删除！！"); request.getRequestDispatcher("/message.jsp").forward(request, response); return; } // 处理文件名 String realname = fileName.substring(fileName.indexOf("_") + 1); // 设置响应头，控制浏览器下载该文件 response.setHeader("content-disposition", "attachment;filename=" + URLEncoder.encode(realname, "UTF-8")); // 读取要下载的文件，保存到文件输入流 FileInputStream in = new FileInputStream(fileSaveRootPath + "\" + fileName); // 创建输出流 OutputStream out = response.getOutputStream(); // 创建缓冲区 byte buffer[] = new byte[1024]; int len = 0; // 循环将输入流中的内容读取到缓冲区当中 while ((len = in.read(buffer)) > 0) { // 输出缓冲区的内容到浏览器，实现文件下载 out.write(buffer, 0, len); } // 关闭文件输入流 in.close(); // 关闭输出流 out.close(); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
- 下载servlet的web.xml配置，web.xml
-
<servlet> <servlet-name>DownloadServlet</servlet-name> <servlet-class>com.servlet.DownloadServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>DownloadServlet</servlet-name> <url-pattern>/download</url-pattern> </servlet-mapping> - 演示效果（访问地址：http://localhost:8080/test-fileuploadanddownload/listFile，注意需要先上传文件，保证/WEB-INF/upload文件夹下面有文件）
此文来源于 https://www.cnblogs.com/h--d/p/5761649.html
Jquery ajax上传带进度条
此文来源于 https://www.cnblogs.com/h--d/p/Web.html#4237951
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>文件上传 jquery上传</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> .container{ 200px; height: 20px; background-color: gray; } #progress{ height: 20px; background-color: orange; display: inline-block; } </style> </head> <body> <form action="${pageContext.request.contextPath }/upload" enctype="multipart/form-data" method="post"> 上传文件1: <input type="file" name="file1"><br /> <div class='container'> <span id="progress"></span> </div> </form> <br> <button onclick="upload()">确认上传</button> <div id="info"></div> <div id="result"></div> <script> var totalSize = 0; //绑定所有type=file的元素的onchange事件的处理函数 $(':file').change(function() { var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了 name = file.name; size = file.size; type = file.type; url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片 totalSize += size; $("#info").html("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url); }); function upload() { //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value"); var formData = new FormData($('form')[0]); //ajax异步上传 $.ajax({ url: "${pageContext.request.contextPath }/upload", type: "POST", data: formData, xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数 myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ //检查upload属性是否存在 //绑定progress事件的回调函数 myXhr.upload.addEventListener('progress',progressHandlingFunction, false); } return myXhr; //xhr对象返回给jQuery使用 }, success: function(result){ $("#result").html(result); }, contentType: false, //必须false才会自动加上正确的Content-Type processData: false //必须false才会避开jQuery对 formdata 的默认处理 }); } //上传进度回调函数： function progressHandlingFunction(e) { if (e.lengthComputable) { $('#progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条 var percent = e.loaded/e.total*100; $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%"); $('#progress').css('width', percent.toFixed(2) + "%"); } } </script> </body> </html>