1. 程式人生 > >js+jstl+servlet實現檔案上傳、列表展示及檔案下載

js+jstl+servlet實現檔案上傳、列表展示及檔案下載

檔案上傳 1.upload.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="upload" method="post" enctype="multipart/form-data">
		俠侶稱謂:<input type="text" name="cpname" placeholder="閣下名諱是?"><br>
		俠士:<input type="file" name="male"><br>
		巾幗:<input type="file" name="female"><br>
		<input type="submit">
	</form>
</body>
</html>


1.2 將表單中的input分裝到一個類中,UploadInfo類,方便在後續操作表單中通過input上傳的資料、檔案

package com.qfedu.pojo;

public class UploadInfo {

	private String idcard;

	private String zheng;

	private String fan;

	public String getIdcard() {
		return idcard;
	}

	public void setIdcard(String idcard) {
		this.idcard = idcard;
	}

	public String getZheng() {
		return zheng;
	}

	public void setZheng(String zheng) {
		this.zheng = zheng;
	}

	public String getFan() {
		return fan;
	}

	public void setFan(String fan) {
		this.fan = fan;
	}
	
}

客戶端發起上傳請求到達UploadServlet,處理檔案
2.UploadServlet.java
@WebServlet("/upload")
public class UploadServlet extends HttpServlet{
	//建立一個將前端上傳的資料作為變數的物件,可以用通過該物件的set、get方法修改和獲取上傳的資料
	private UploadInfo uploadInfo = new UploadInfo();
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		/*
		  1獲取表單中的檔案物件
		  2把檔案儲存在伺服器的資料夾中
		*/
		
		// DiskFileItemFactory用來設定臨時儲存目錄和緩衝區大小
		DiskFileItemFactory dfif = new DiskFileItemFactory();
		//以位元組為單位設定記憶體緩衝大小
		dfif.setSizeThreshold(1024*1024*5);
		//設定臨時儲存目錄,允許和最終檔案儲存在同一目錄
		File temp = new File("D:/PPT/upload");
		//指定檔案儲存目錄時,先判斷該目錄是否存在,不存在時需建立該目錄
		if (temp.exists()) {
			temp.mkdir();
		}
		//設定臨時儲存目錄
		dfif.setRepository(temp);
		
		// ServletFileUpload提供了對請求的解析,和請求大小限制的相關功能
		ServletFileUpload sf = new ServletFileUpload(dfif);
		//設定上傳的一個檔案的大小限制
		sf.setFileSizeMax(1024*1024*5);
		//設定表單中所有input加起來的上傳大小
		sf.setSizeMax(1024*1024*10);
		
		try {
			//解析請求,返回的是form表單中所有帶有name屬性的input的資料的封裝物件List集合
			List<FileItem> list = sf.parseRequest(req);
			
			//遍歷list,獲取到上傳的資料
			for (FileItem fileItem : list) {
				//判斷上傳的是否是普通文字表單
				if(fileItem.isFormField()) {
	//是普通文字表單,則將其上傳編碼格式設為utf-8,解決中文亂碼問題
	//現在獲取到的是位元組,所以獲取表單內容不使用getParaMeter
					String value = fileItem.getString("utf-8");
					System.out.println(value);
					
        //將獲取到的檔名通過set方法設定給當前檔案
					if ("cpname".equals(fileItem.getFieldName())) {
						uploadInfo.setCpname(value);
					}
				} else {
        //獲取到包括字尾的檔名
					String filename = fileItem.getName();
        //獲取到字尾名在完整檔名中的位置
					int lastIndex = filename.lastIndexOf(".");
        //獲取到 “.字尾名”
					String sufName = filename.substring(lastIndex);
        //隨機生成一個不重複的檔名
					String finalName = UUID.randomUUID().toString().replace("-", "") + sufName;
	//不是普通文字而是一個檔案 ,這時可以執行上傳,但需要判斷使用者是否已經選擇檔案
	//選擇檔案了,將檔案寫入到指定資料夾中
					if (filename != null && filename.length() > 0) {
        //write用於把檔案寫入到伺服器指定的檔案中
						fileItem.write(new File("D:/PPT/upload/" + finalName));
        //獲得fileItem對應的表單的name屬性的值
						String filedName = fileItem.getFieldName();
						
        //將獲取到的檔名通過set方法設定給當前檔案
						if ("male".equals(filedName)) {
							uploadInfo.setMale(finalName);
						}
        //將獲取到的檔名通過set方法設定給當前檔案
						if ("female".equals(filedName)) {
							uploadInfo.setFemale(finalName);
						}
					} else {
        //未選擇檔案,返回選擇檔案介面重新選擇檔案
						resp.sendRedirect("/FirstUpload/upload.html");
						return;
					}
				}
			
			}
			String sql = "insert into couple values(null,?,?,?)";
			
			ArrayList<Object> datas = new ArrayList<Object>();
			datas.add(uploadInfo.getCpname());
			datas.add(uploadInfo.getMale());
			datas.add(uploadInfo.getFemale());
			//將檔名傳輸到資料庫	之後在展示介面通過通過  URL?檔名  方式下載檔案
			DdUtils.update(sql, datas);
                        //重定向到ListServlet
			resp.sendRedirect("/FirstUpload/list");
		} catch (Exception e) {
			e.printStackTrace();
			resp.sendRedirect("/FirstUpload/error.html");
		}
	}
}


UploadServlet 中將從前端獲取到的資料檔案存放到資料庫中,然後重定向到ListServlet 中,從資料庫獲取到檔案並渲染到list.jsp 前端進行展示 3.ListServlet.java
@WebServlet("/list")
public class ListServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//從資料庫中獲取檔案資訊
		String sql = "select * from upload";

		try {
			List<HashMap<String, Object>> datas = DdUtils.query(sql, null);

			req.setAttribute("datas", datas);
			//轉發到WEB-INF/list.jsp
			req.getRequestDispatcher("WEB-INF/list.jsp").forward(req, resp);

		} catch (ClassNotFoundException | SQLException e) {
			e.printStackTrace();
		}
	}}

ListServlet 中渲染資料到list.jsp 進行展示 4.list.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>Insert title here</title>
</head>
<body>
	<ul>
//${datas} 獲取到的datas資料集合  uploadinfo為當前物件
		<c:forEach items="${datas}" var="uploadinfo">
//<a href="download?name=${uploadinfo.zheng}"> 傳送請求到DownloadServlet,獲取對應檔案
			<li>${uploadinfo.idcard}|<a href="download?name=${uploadinfo.zheng}">${uploadinfo.zheng }</a>|
			<a href="download?name=${uploadinfo.fan}">${uploadinfo.fan }</a></li>
		</c:forEach>

	</ul>
</body>
</html>


檔案下載 5.DownloadServlet.java
@WebServlet("/download")
public class DownloadServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 獲取前端傳入的需要下載的檔名字
		String name = req.getParameter("name");

		File file = new File("Z:/windos/files/" + name);

		resp.setContentType("application/octet-stream");

		// 設定檔名字,我們只需要修改filename=後面的檔名,其他是固定的字串
		// 檔案下載的時候如果檔案的名字是中文,會出現亂碼
		resp.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(file.getName(), "UTF-8"));

		// 把檔案轉成位元組輸出
		resp.getOutputStream().write(FileUtils.readFileToByteArray(file));
	}
}



1.1 upload.html 檔案上傳介面 1.upload.html(上傳檔案介面.1)

1.2 upload.html 檔案上傳頁面 2.upload.html(上傳檔案介面.2)






2. list.jsp 檔案展示列表 3.list.jsp(列表展示介面)

資料庫-table-上傳到資料庫的檔案的名字 資料庫-table

3.1 下載操作-點選檔名下載 4.1下載操作-點選列表中的圖片名

3.2 下載結果-下載到指定目錄 4.2下載結果