servlet上傳文件+上傳進度顯示

效果圖

功能描述

1.使用jquery.form.js實現異步上傳功能,並顯示上傳進度
2.servlet中保存上傳的文件到指定文件夾
3.查看已經上傳的文件
4.不一樣文件類型用不一樣圖標顯示

下載

https://github.com/houxinlin/ServletUploadFile

項目結構

實現過程

1.Servlet代碼
MainServlet.java

MainServlet負責主界面信息,遍歷已經上傳的文件名,傳遞給jsp

@WebServlet("/MainServlet")
public class MainServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public MainServlet() {
        super();
    }


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
        
        System.out.println(basePath);
        List<String> list =FilesUtils.listDirFiles(Config.UPLOAD_PATH);
        Map<String, String> map =new HashMap<>();
        for (String string : list) {
            map.put(string, string.substring(string.lastIndexOf(".")+1, string.length()) +"");
            
        }
        request.setAttribute("files", map);
        request.setAttribute("basePath", basePath);
        request.getRequestDispatcher("upload/index.jsp").forward(request, response);
        
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

UploadServlet.java
UploadServlet負責保存文件,若是文件有同名的,則更正

package com.houxinlin.servlets;

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

/**
 * Servlet implementation class UploadServlet
 */
@WebServlet("/UploadServlet")
@MultipartConfig
public class UploadServlet 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 {
        request.setCharacterEncoding("utf-8");
        Part part =request.getPart("file");
        if(part!=null) {
            saveFile(part.getInputStream(),Config.UPLOAD_PATH,part.getSubmittedFileName());
        }

    }
    private void saveFile(InputStream is,String rootPath , String name) {
        try {
            String tempName =name;
            
            Path path =Paths.get(rootPath, tempName);
            int index=0;
            //若是文件存在
            if(Files.exists(path)) {
            
                while(Files.exists(path)) {
                
                    name=(++index)+tempName;
                    path =Paths.get(rootPath, name);
                }
                System.out.println("文件存在,文件名改正爲----"+name);
            }
            System.out.println("保存---->"+rootPath +File.separatorChar+name);
            Files.copy(is, Paths.get(rootPath, name));
        } catch (IOException 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);
    }

}

輔助類
FilesUtils.java和Configa.java

package com.houxinlin.servlets;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.stream.Stream;

public class FilesUtils {
    public  static List<String> listDirFiles(String rootPath){
        List<String> list =new ArrayList<>();
        
        Stream<Path> paths;
        try {
            paths = Files.list(Paths.get(rootPath));
            Iterator<Path> item =paths.iterator();
            while (item.hasNext()) {
                Path path =item.next();
                if(!Files.isDirectory(path)) {
                    list.add(path.getFileName()+"");
                }
            }
            
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return list;
    }
}

package com.houxinlin.servlets;

public class Config {
    public static final String UPLOAD_PATH="D:\\upload";
}

js

$("#add-file").click(function(param) {
    param.stopPropagation();
    param.stopPropagation();
    $("#upload-layout").css("display", "block")
})

$("#select-file-btn").click(function(param) {
    document.getElementById("file-input").click();
})
$("#file-input").change(function() {
    $("#select-file-btn label").html($("#file-input").val());
    $("#up-btn #progress-value").css("width", 0 +"%");
    $("#up-btn .title").html("上傳")

});

$("#up-btn").click(function(param) {
    $(this).css({
        "width" : "87%",
    });
    upload();

})

function upload(param) {

    $("#upload-form").ajaxSubmit({
        success : function(param) {
            $("#up-btn .title").html("完成")
        },
        uploadProgress : function(event, position, total, percentComplete) {
            var width =(position/total)*100;
            $("#up-btn #progress-value").css("width", width +"%");
            $("#up-btn .title").html(+"%")
            var value =parseInt(width);
            $("#up-btn .title").html(value+"%")
        },
        fail : function(param) {
            $("#up-btn .title").html("失敗")
        }
    })

}