要想实现文件的上传功能，最基础的就是在jsp中使用form提交的方式实现，但这种方式会在页 面中呈现两个按钮，并且自带的按钮比较丑。 最近在做项目的过程中，实现了用一个按钮实现文件异步上传的功能。其中异步上传的JS和Servlet采用的是”zouminglan“的博客中的代码，见：https://www.cnblogs.com/zml-java/p/6255311.html。 这里需要用到插件ajaxfileupload.js，jar包：commons-fileupload-1.3.2.jar，commons-io-2.5.jar。 其中，jsp代码如下：
<%-- Created by IntelliJ IDEA. User: yjk Date: 2018/6/8 Time: 21:01 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>一个按钮实现文件异步上传</title> <link type="text/css" href="css/importFile.css" rel="stylesheet"> </head> <body> <div id="import"> <div><img src="images/import_30x30_white.png"></div> <%--input须在import之前--%> <input type="file" id="file" name="file" title="import" onchange="importFile()" /> <div onclick="return selectFile()">import</div> </div> </body> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/ajaxfileupload.js"></script> <script type="text/javascript" src="js/importFile.js"></script> </html>js代码：
function selectFile() { $("#file").trigger("click"); //让import按钮的事件触发 } function importFile() { var name = $('#file').val(); //获得文件名称,$('#file').val()含有路径 -- C:\fakepath\shudian1.pnml name=name.split("fakepath\\")[1]; //判断是什么类型的文件，类型正确才上传，防止用户错误提交不正确的文件,防止浪费内存空间. if (name.includes(".xml") || name.includes(".pnml")) { $.ajaxFileUpload ( { url:'/importFile',//用于文件上传的服务器端请求地址 secureuri:false,//一般设置为false fileElementId:'file',//文件上传标签的id属性 dataType: 'text',//返回值类型 一般设置为json success: function (data) //服务器成功响应处理函数 { alert("上传成功"); }, error: function (data)//服务器响应失败处理函数 { alert("上传失败"); } } ); } else{ alert("文件格式必须是xml或pnml！"); } return false; }servlet代码：
package servlet; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; 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.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; @WebServlet(name = "importFile") public class importFile extends HttpServlet { private static final long serialVersionUID = 1L; // 上传文件存储目录 private static final String UPLOAD_DIRECTORY = "importFile"; // 上传配置 private static final int MEMORY_THRESHOLD = 1024 * 1024 * 3; // 3MB private static final int MAX_FILE_SIZE = 1024 * 1024 * 40; // 40MB private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50; // 50MB public importFile(){ super(); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter writer = response.getWriter(); // 检测是否为多媒体上传 if (!ServletFileUpload.isMultipartContent(request)) { // 如果不是则停止 writer.println("Error: 表单必须包含 enctype=multipart/form-data..."); writer.flush(); return; } //记住要写这句话，上传的文件名才不会乱码！！！！！！！！！ request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); // 配置上传参数 DiskFileItemFactory factory = new DiskFileItemFactory(); // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中 factory.setSizeThreshold(MEMORY_THRESHOLD); // 设置临时存储目录 factory.setRepository(new File(System.getProperty("java.io.tmpdir"))); ServletFileUpload upload = new ServletFileUpload(factory); // 设置最大文件上传值 upload.setFileSizeMax(MAX_FILE_SIZE); // 设置最大请求值 (包含文件和表单数据) upload.setSizeMax(MAX_REQUEST_SIZE); // 构造临时路径来存储上传的文件 // 这个路径相对当前应用的目录 String uploadPath = request.getContextPath() + File.separator + UPLOAD_DIRECTORY; //获取项目发布路径下的upload文件夹 uploadPath = request.getSession().getServletContext().getRealPath("/importFile"); // 如果目录不存在则创建 File uploadDir = new File(uploadPath); if (!uploadDir.exists()) { uploadDir.mkdir(); } try { // 解析请求的内容提取文件数据 // @SuppressWarnings("unchecked") List<FileItem> formItems = upload.parseRequest(request); if (formItems != null && formItems.size() > 0) { // 迭代表单数据 for (FileItem item : formItems) { // 处理不在表单中的字段 if (!item.isFormField()) { //这里处理文件中文乱码没用。。。。。。。。。 System.out.println(new String(item.getName().getBytes("utf-8"),"iso-8859-1")); String fileName = new File(item.getName()).getName(); String filePath = uploadPath + File.separator + fileName; File storeFile = new File(filePath); // 在控制台输出文件的上传路径 System.out.println(filePath); // 保存文件到硬盘 item.write(storeFile); //注意编码，不然返回前端会乱码！！！ writer.println(new String("上传成功！".getBytes("utf-8"),"iso-8859-1")); } } } } catch (Exception ex) { ex.printStackTrace(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } }css代码：
#import{ width: 100px; height: 30px; line-height: 30px; border-radius: 5px; background-color: #555555; margin-right: 15px; margin-top: 5px; padding: 5px; color: white; } #import：hover{ cursor: pointer; background-color: darkgreen; } #import div:nth-of-type(1){ width: 30px; height: 30px; float: left; } #import div:nth-of-type(2){ height: 30px; line-height: 30px; float: left; margin-left: 10px; } #import input{ position:absolute; display: inline-block; width:110px ; height: 40px; cursor: pointer; left:0; top:0; opacity:0; }当然最后还要配置web.xml：
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>importFile</display-name> <servlet> <servlet-name>importFile</servlet-name> <servlet-class>servlet.importFile</servlet-class> </servlet> <servlet-mapping> <servlet-name>importFile</servlet-name> <url-pattern>/importFile</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>importFile.jsp</welcome-file> </welcome-file-list> </web-app>大家也可以到github上直接下载，网址是https://github.com/Ritajiao/importFile
