commons-fileupload完成文件上傳

環境資源javascript

  Apache的commons-fileupload工具jar包html

    

       

案例需求描述前端

   頁面展現上傳文件窗口及確認按鈕java

       提供新建及刪除上傳窗口功能,支持多文件上傳
apache

支持文件分離後端

解決文件重名服務器

解決思路及知識點app

  1. 設置一個form表單,設置請求方式爲post,設置enctype="multipart/form-data" 用來提示當前是文件上傳請求
  2. form表單內添加屬性爲file的input標籤,提供文件上傳
  3. 動態建立新建及刪除上傳窗口按鈕
  4. 後端接受上傳數據,解析並存儲到服務器目錄下

代碼實現(暫不實現目錄分離)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>
View Code

  後臺

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);
    }

}
View Code

 

   目錄分離思路

    1. 每個用戶有一個專屬的文件夾
    2. 每個用戶一個專屬文件夾的基礎上,天天生成一個文件夾,用來存當天上傳的文件先是有一個張三專屬的文件夾,而後,天天建立一個當前的文件夾,專門用來存儲,當天上傳的文件。

效果展現

  前端按鈕 

  

   上傳後的效果

    

相關文章
相關標籤/搜索