環境資源javascript
Apache的commons-fileupload工具jar包html
案例需求描述前端
頁面展現上傳文件窗口及確認按鈕java
提供新建及刪除上傳窗口功能,支持多文件上傳
apache
支持文件分離後端
解決文件重名服務器
解決思路及知識點app
代碼實現(暫不實現目錄分離)ide
前端頁面工具
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <c:set var="root" value="${pageContext.request.contextPath}"/> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> function _addInput(){ //建立一個input type file ,添加文件上傳 var _input = document.createElement("input"); _input.setAttribute("type", "file"); _input.setAttribute("name", "upload"); //獲取div,獲取到input插入的位置 var _div = document.getElementById("_un"); _div.appendChild(_input); //建立刪除按鈕,插入到div中 var _delete = document.createElement("input"); _delete.setAttribute("type", "button"); _delete.setAttribute("value", "刪除"); _delete.onclick = function(){ //刪除多餘的文件上傳 var _f = this.parentNode; //刪除input type file _f.removeChild(this.previousSibling); //刪除換行符 _f.removeChild(this.nextSibling); //自殺 _f.removeChild(this); }; _div.appendChild(_delete); //添加換行符 var _br = document.createElement("br"); _div.appendChild(_br); } </script> </head> <body> <!-- a) 提供一個按鈕,用戶點擊一下,生成一個input type=「file」的輸入框 --> <input type="button" value="添加要上傳的文件" onclick="_addInput();"><br> <form action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data"> 選擇要上傳的文件:<input type="file" name="upload"><br> <div id="_un"></div> <input type="submit" value="確認上傳"> </form> </body> </html>
後臺
package com.learn.upload; import java.io.File; import java.io.IOException; import java.util.List; 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.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; /** * Servlet implementation class UpLoadServlet */ public class UpLoadServlet extends HttpServlet { /** * */ private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); try { List<FileItem> list = upload.parseRequest(request); for (FileItem fileItem : list) { if(fileItem.isFormField()){ System.out.println(fileItem.getName()); System.out.println(fileItem.getString()); }else{ String realPath="C:\\Users\\星星\\Desktop\\"; File file1= new File(realPath+"upload"); file1.mkdir(); System.out.println("realPath:"+realPath); String fileName=fileItem.getName(); long currentTimeMillis = System.currentTimeMillis(); String fileNameDiff=currentTimeMillis+fileName; File file = new File(file1,fileNameDiff); try { fileItem.write(file); } catch (Exception e) { e.printStackTrace(); } } } } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } } /** * @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); } }
目錄分離思路
效果展現
前端按鈕
上傳後的效果