2. 程式人生 > >JSP 實用程式之簡易檔案上傳元件

JSP 實用程式之簡易檔案上傳元件

阿新 • • 發佈：2019-01-04

Edit：6-19 更新，提供了基於 Servlet（非 JSP）的元件下載，這是一個完整的 Java Web 專案，用 Eclipse 匯入即可，專案原始碼在這裡。

檔案上傳，包括但不限於圖片上傳，是 Web 開發中司空見慣的場景，相信各位或多或少都曾寫過這方面相關的程式碼。Java 界若說檔案上傳，則言必稱 Apache Commons FileUpload，論必及  SmartUpload。更甚者，Servlet 3.0 將檔案上傳列入 JSR 標準，使得通過幾個註解就可以在 Servlet 中配置上傳，無須依賴任何元件。使用第三方元件或 Servlet 自帶元件固然強大，但只靠 JSP 亦能完成任務，且短小而精悍，豈不美哉？本文實現的方法純然基於 JSP 程式碼，沒有弄成 Servlet 和專門的 Class（.java），實現方法純粹是基於 JSP，沒有太高的技術難度。實際使用過程中直接部署即可。

操作元件的程式碼行數不超過 10 行，只需幾個步驟：

  1. 生成元件例項
  2. 設定例項屬性
  3. 呼叫上傳/下載方法
  4. 處理呼叫結果

首先是上傳頁面，本例是一張靜態的 HTML。

上傳成功如下圖所示。


使用 POST 的表單，設定 ContentType 為 multipart/form-data 多段資料，還要記得 input 的 name 屬性。

<html>
<body>
	<form action="action.jsp" enctype="multipart/form-data" method="POST">
		selectimage: <input type="file" name="myfile" /><br> <input
			type="submit" value="upload" />
	</form>
</body>
</html>

action 中接受客戶端請求的服務端程式碼在 action.jsp 中。action.jsp 通過 <%@include file="Upload.jsp"%>包含了核心 Java 程式碼，而 Upload.jsp 裡面又包含了另外一個 UploadRequest.jsp 檔案。總之，我們這個小小的 Java 程式，一共包含了 UploadRequest 請求資訊類、UploadException 自定義異常類和最重要的 Upload 類這三個類。

<%@page pageEncoding="UTF-8"%>
<%@include file="Upload.jsp"%>
<%
	UploadRequest ur = new UploadRequest();// 建立請求資訊，所有引數都在這兒設定
	ur.setRequest(request);	//一定要傳入 request
	ur.setFileOverwrite(true);// 相同檔名是否覆蓋？true=允許覆蓋

	Upload upload = new Upload();// 上傳器

	try {
		upload.upload(ur);
	} catch (UploadException e) {
		response.getWriter().println(e.toString());
	}

	if (ur.isOk()) // 上傳成功
		response.getWriter().println("上傳成功：" + ur.getUploaded_save_fileName());
	else
		response.getWriter().println("上傳失敗！");
%>

這裡建立了 UploadRequest 例項。檔案上傳操作通常會附加一些限制，如：檔案型別、上傳檔案總大小、每個檔案的最大大小等。除此以外，作為一個通用元件還需要考慮更多的問題， 如：支援自定義檔案儲存目錄、支援相對路徑和絕對路徑、支援自定義儲存的檔案的檔名稱等。這些配置通通在 UploadRequest 裡設定。

至於 JSP 裡面的類，我願意多說說。 JSP 裡面允許我們定義 Java 的類，類本是可以是 static，但不能有 static 成員。實際上 JSP 類都是內部類，定義 static 與否關係不大。如果不能定義 static 方法，就把 static 方法移出類體外，書寫成，

 <%!

    /**
     * 獲取開頭資料頭佔用的長度
     *
     * @param dateBytes
     *            檔案二進位制資料
     * @return
     */
    private static int getStartPos(byte[] dateBytes) {

      ....

    }

%>

 <%! ... %> 和 <% ... %> 不同，前者是定義類成員的。

好~我們在看看 UploadRequest.jsp，就知道具體配置些什麼。

<%@page pageEncoding="UTF-8"%>
<%!/**
	 * 上傳請求的 bean，包含所有有關請求的資訊
	 * @author frank
	 *
	 */
	public static class UploadRequest {
		/**
		 * 上傳最大檔案大小，預設 1 MB
		 */
		private int MaxFileSize = 1024 * 1000;

		/**
		 * 儲存檔案的目錄
		 */
		private String upload_save_folder = "E:\\temp\\";

		/**
		 * 上傳是否成功
		 */
		private boolean isOk;

		/**
		 * 是否更名
		 */
		private boolean isNewName;

		/**
		 * 成功上傳之後的檔名。如果 isNewName = false，則是原上傳的名字
		 */
		private String uploaded_save_fileName;

		/**
		 * 相同檔名是否覆蓋？true=允許覆蓋
		 */
		private boolean isFileOverwrite = true;

		private HttpServletRequest request;

		/**
		 * @return the maxFileSize
		 */
		public int getMaxFileSize() {
			return MaxFileSize;
		}

		/**
		 * @param maxFileSize the maxFileSize to set
		 */
		public void setMaxFileSize(int maxFileSize) {
			MaxFileSize = maxFileSize;
		}

		/**
		 * @return the upload_save_folder
		 */
		public String getUpload_save_folder() {
			return upload_save_folder;
		}

		/**
		 * @param upload_save_folder the upload_save_folder to set
		 */
		public void setUpload_save_folder(String upload_save_folder) {
			this.upload_save_folder = upload_save_folder;
		}

		/**
		 * @return the isOk
		 */
		public boolean isOk() {
			return isOk;
		}

		/**
		 * @param isOk the isOk to set
		 */
		public void setOk(boolean isOk) {
			this.isOk = isOk;
		}

		/**
		 * @return the isNewName
		 */
		public boolean isNewName() {
			return isNewName;
		}

		/**
		 * @param isNewName the isNewName to set
		 */
		public void setNewName(boolean isNewName) {
			this.isNewName = isNewName;
		}

		/**
		 * @return the uploaded_save_fileName
		 */
		public String getUploaded_save_fileName() {
			return uploaded_save_fileName;
		}

		/**
		 * @param uploaded_save_fileName the uploaded_save_fileName to set
		 */
		public void setUploaded_save_fileName(String uploaded_save_fileName) {
			this.uploaded_save_fileName = uploaded_save_fileName;
		}

		/**
		 * @return the isFileOverwrite
		 */
		public boolean isFileOverwrite() {
			return isFileOverwrite;
		}

		/**
		 * 相同檔名是否覆蓋？true=允許覆蓋
		 * @param isFileOverwrite the isFileOverwrite to set
		 */
		public void setFileOverwrite(boolean isFileOverwrite) {
			this.isFileOverwrite = isFileOverwrite;
		}

		/**
		 * @return the request
		 */
		public HttpServletRequest getRequest() {
			return request;
		}

		/**
		 * @param request the request to set
		 */
		public void setRequest(HttpServletRequest request) {
			this.request = request;
		}

	}
	
%>

這是一個普通的 Java bean。完成上傳邏輯的是 Upload 類。 其原理是，1、由客戶端把要上傳的檔案生成 request 資料流，與伺服器端建立連線；2、在伺服器端接收 request 流，將流快取到記憶體中；3、由伺服器端的記憶體把檔案輸出到指定的目錄。Upload.jsp 完整程式碼如下所示。

<%@page pageEncoding="UTF-8" import="java.io.*"%>
<%@include file="UploadRequest.jsp"%>
<%!

public static class UploadException extends Exception {
	
	private static final long serialVersionUID = 579958777177500819L;

	public UploadException(String msg) {
		super(msg);
	}

}

public static class Upload {
	/**
	 * 接受上傳
	 * 
	 * @param uRequest
	 *            上傳 POJO
	 * @return
	 * @throws UploadException
	 */
	public UploadRequest upload(UploadRequest uRequest) throws UploadException {
		HttpServletRequest req = uRequest.getRequest();
		
		// 取得客戶端上傳的資料型別
		String contentType = req.getContentType();

		if(!req.getMethod().equals("POST")){
			throw new UploadException("必須 POST 請求");
		}
		
		if (contentType.indexOf("multipart/form-data") == -1) {
			throw new UploadException("未設定表單  multipart/form-data");
		}
		
		int formDataLength = req.getContentLength();
		
		if (formDataLength > uRequest.getMaxFileSize()) { // 是否超大
			throw new UploadException("檔案大小超過系統限制！");
		}
		
		// 儲存上傳的檔案資料
		byte dateBytes[] = new byte[formDataLength];
		int byteRead = 0, totalRead = 0;

		try(DataInputStream in = new DataInputStream(req.getInputStream());){
			while (totalRead < formDataLength) {
				byteRead = in.read(dateBytes, totalRead, formDataLength);
				totalRead += byteRead;
			}
		} catch (IOException e) {
			e.printStackTrace();
			throw new UploadException(e.toString());
		}				
				
		// 取得資料分割字串
		int lastIndex = contentType.lastIndexOf("="); // 資料分割線開始位置boundary=---------------------------
		String boundary = contentType.substring(lastIndex + 1, contentType.length());// ---------------------------257261863525035

		// 計算開頭資料頭佔用的長度
		int startPos = getStartPos(dateBytes);
		// 邊界位置
		int endPos = byteIndexOf(dateBytes, boundary.getBytes(), (dateBytes.length - startPos)) - 4;

		// 建立檔案
		String fileName = uRequest.getUpload_save_folder() + getFileName(dateBytes, uRequest.isNewName());
		uRequest.setUploaded_save_fileName(fileName);
		File checkedFile = initFile(uRequest);

		// 寫入檔案
		try(FileOutputStream fileOut = new FileOutputStream(checkedFile);){
			fileOut.write(dateBytes, startPos, endPos - startPos);
			fileOut.flush();
			
			uRequest.setOk(true);
		} catch (FileNotFoundException e) {
			e.printStackTrace();
			throw new UploadException(e.toString());
		} catch (IOException e) {
			e.printStackTrace();
			throw new UploadException(e.toString());
		} 
		
		return uRequest;
	}
}

	/**
	 * 獲取開頭資料頭佔用的長度
	 * 
	 * @param dateBytes
	 *            檔案二進位制資料
	 * @return
	 */
	private static int getStartPos(byte[] dateBytes) {
		int startPos;
		startPos = byteIndexOf(dateBytes, "filename=\"".getBytes(), 0);
		startPos = byteIndexOf(dateBytes, "\n".getBytes(), startPos) + 1; // 遍歷掉3個換行符到資料塊
		startPos = byteIndexOf(dateBytes, "\n".getBytes(), startPos) + 1;
		startPos = byteIndexOf(dateBytes, "\n".getBytes(), startPos) + 1;
		
		return startPos;
	}
	
	/**
	 * 在位元組數組裡查詢某個位元組陣列，找到返回>=0，未找到返回-1
	 * @param data
	 * @param search
	 * @param start
	 * @return
	 */
	private static int byteIndexOf(byte[] data, byte[] search, int start) {
		int index = -1;
		int len = search.length;
		for (int i = start, j = 0; i < data.length; i++) {
			int temp = i;
			j = 0;
			while (data[temp] == search[j]) {
				// System.out.println((j+1)+",值："+data[temp]+","+search[j]);
				// 計數
				j++;
				temp++;
				if (j == len) {
					index = i;
					return index;
				}
			}
		}
		return index;
	}
	
	/**
	 * 如果沒有指定目錄則建立；檢測是否可以覆蓋檔案
	 * 
	 * @param uRequest
	 *            上傳 POJO
	 * @return
	 * @throws UploadException
	 */
	private static File initFile(UploadRequest uRequest) throws UploadException {
		File dir = new File(uRequest.getUpload_save_folder());
		if (!dir.exists())
			dir.mkdirs();
		
		File checkFile = new File(uRequest.getUploaded_save_fileName());
		
		if (!uRequest.isFileOverwrite() && checkFile.exists()) {
			throw new UploadException("檔案已經存在，禁止覆蓋！");
		}
		
		return checkFile;
	}
	
	/**
	 * 獲取 POST Body 中的檔名
	 * 
	 * @param dateBytes
	 *            檔案二進位制資料
	 * @param isAutoName
	 *            是否自定命名，true = 時間戳檔名
	 * @return
	 */
	private static String getFileName(byte[] dateBytes, boolean isAutoName) {
		String saveFile = null;
		
		if(isAutoName){
			saveFile = "2016" + System.currentTimeMillis();
		} else {
			String data = null;
			try {
				data = new String(dateBytes, "UTF-8");
			} catch (UnsupportedEncodingException e) {
				e.printStackTrace();
				data = "errFileName";
			}
			
			// 取得上傳的檔名
			saveFile = data.substring(data.indexOf("filename=\"") + 10);
			saveFile = saveFile.substring(0, saveFile.indexOf("\n"));
			saveFile = saveFile.substring(saveFile.lastIndexOf("\\") + 1, saveFile.indexOf("\""));
		}
		
		return saveFile;
	}
%>

通過 DataInputStream 讀取流資料到 dataBytes 中然後寫入 FileOutputStream。另外還有些圍繞配置的邏輯。

值得一提的是，Tomcat 7 下 JSP 預設的 Java 語法仍舊是 1.6 的。在 JSP 裡面嵌入 Java 1.7 特性的程式碼會丟擲“Resource specification not allowed here for source level below 1.7”的異常。於是需要修改 Tomcat/conf/web.xml 裡面的配置檔案，找到 <servlet> 節點，加入下面粗體部分才可以。注意是 jsp 節點，不是 default 節點（很相似）。

 <servlet>
        <servlet-name>jsp</servlet-name>
        <servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class>
        <init-param>
            <param-name>fork</param-name>
            <param-value>false</param-value>
        </init-param>
        <init-param>
            <param-name>xpoweredBy</param-name>
            <param-value>false</param-value>
        </init-param>
<strong>        <init-param>
            <param-name>compilerSourceVM</param-name>
            <param-value>1.7</param-value>
        </init-param>
        <init-param>
            <param-name>compilerTargetVM</param-name>
            <param-value>1.7</param-value>
        </init-param></strong>
        <load-on-startup>3</load-on-startup>
    </servlet>

至此，一個簡單的檔案上傳器就完成了。但是本元件的缺點還是很明顯的，試列舉兩項：一、上傳流佔用記憶體而非磁碟，所以上傳大檔案時記憶體會吃緊；二、尚不支援多段檔案上傳，也就是一次只能上傳一個檔案。

相關推薦

JSP 實用程式之簡易檔案上傳元件

Edit：6-19 更新，提供了基於 Servlet（非 JSP）的元件下載，這是一個完整的 Java Web 專案，用 Eclipse 匯入即可，專案原始碼在這裡。檔案上傳，包括但不限於圖片上傳，是 Web 開發中司空見慣的場景，相信各位或多或少都曾寫過這方面相關的程式碼。

Sentry命令列工具之PDB檔案上傳

Sentry尚不直接支援Microsoft PDB檔案。在我們提供官方支援之前，您可以將它們轉換為Breakpad符號並上傳它們： 獲取.pdb檔案並將其放在Windows計算機上 下載我們的Windows Breakpad Tools並解壓縮dump_syms.exe 執行d

Bootstrap之fileinput檔案上傳控制元件

 前言~ 前段時間做專案用到了bootstrap裡中的檔案上傳控制元件，對此特定寫這篇文章，講述一下bootstrap的檔案上傳空間的使用方法。 我們進入正題吧！        首先bootstrap是基於jquery的，因此要匯入

微信小程式之圖片的上傳與下載

大家都知道,小程式有著大量的api,檔案(圖片)的上傳也是其中之一. 給大家分享一下個人的用法.我所做的是一個類似空間日誌的圖文釋出以及混排. 首先是圖片的選擇,使用wx.chooseImage,將選中

PHP強化之13 - 檔案上傳與下載

一、檔案上傳 將客戶端檔案上傳到伺服器端，再將伺服器端的檔案（臨時檔案）移動到指定目錄即可。 1、form表單 檔案的上傳一般都是經過form表單來實現的。 1）標籤enctype屬性 表單中enctype="multipart/form-data"是用於設定表單的MIM

整合springboot+mvc+mybatis(通用mapper)+druid+jsp+bootstrap實現許可權管理檔案上傳下載多資料來源切換操作日誌記錄等功能

花了兩週,學習了下springboot,然後做個小東西練練手.專案基於jdk1.8+maven整合了springboot+mvc+mybatis(通用mapper)+druid+jsp+bootstrap等技術,springboot+Listener(監聽器),Filter

Jmeter之模擬檔案上傳、下載介面操作--轉載

  一、準備工作： 上傳介面一個（自行開發解決了） 下載介面 ps:沒有困難創造困難也要上 jmeter4.0版本 上傳介面原始碼 /** * 檔案上傳 */ @RequestMapping

小程式之圖片的上傳、刪除和預覽和視訊的上傳和刪除

最近在做一個小程式，帖子中用到了一個關於文字、圖片和視訊的一些操作。 最終的樣式 原始樣式 上傳圖片 上傳視訊 這個可以實現輸入文字

移動Web開發之HTML5檔案上傳

iOS在瀏覽器中限制訪問本地檔案，並且不支援Flash，所以沒有一個比較好的辦法在瀏覽器中進行檔案的上傳。幸運的是iOS 6中放開了上傳限制。通過指定HTML5<input>標籤的type屬性為“file”建立一個檔案上傳入口，可以訪問相簿和相機。 <

Springboot 之 多檔案上傳-知識林

本文章來自【知識林】 檔案上傳在各種網站平臺上應用都非常廣泛，這篇文章將講述在Springboot中是如何完成檔案上傳的，Springboot是打包執行的，上傳後的檔案又該何去何從？ pom.

servlet3.0之ajax檔案上傳和進度條

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <h

Tornado web開發之簡單檔案上傳

1、介紹 我們知道，在web開發過程中，檔案上傳是經常用到的功能，比如上傳附件，上傳照片等 下面我們來介紹一下利用tornado 來實現檔案上傳功能 2.程式碼 由於實現檔案上傳的表單很簡單，只需要幾行html，我們把他們直接嵌入到python程式碼中 廢話少說，直接上程

Bootstrap fileinput.js，最好用的檔案上傳元件

本篇介紹如何使用bootstrap fileinput.js（最好用的檔案上傳元件）來進行圖片的展示，上傳，包括springMVC後端檔案儲存。 一、demo 二、外掛引入 <link type="text/css" rel="stylesheet" h

AjaxFileUpload檔案上傳元件 php jQuery ajax

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

vuetify | vue | 檔案上傳元件 | file | upload | form input[type="file"]

今天無聊地寫vuecli3聽歌的時候，遇到了上傳檔案到Django的自我需求，然後就到vuetify的表單元件裡找upload btn，發現居然沒有！！！ 頓時驚了個呆，要知道之前用element做作業系統課設的時候，還是挺全的。 這裡偷偷吐槽，vuetify的alert真的醜...... 這裡分享一個

Vuetify中檔案上傳元件

1.示例： 1.1.單圖片上傳： <v-upload v-model="brand.image" url="/item/upload" :multiple="false" :p

JS元件系列——Bootstrap檔案上傳元件：bootstrap fileinput

前言：之前的三篇介紹了下bootstrap table的一些常見用法，發現博主對這種扁平化的風格有點著迷了。前兩天做一個excel匯入的功能，前端使用原始的input type='file'這種標籤，效果不忍直視，於是博主下定決心要找一個好看的上傳元件換掉它。既然bootstrap開源，那麼社群肯定有很多關於

基於MVC4+EasyUI的Web開發框架形成之旅--附件上傳元件uploadify的使用

大概一年前，我還在用Asp.NET開發一些行業管理系統的時候，就曾經使用這個元件作為檔案的上傳操作，在隨筆《Web開發中的檔案上傳元件uploadify的使用》中可以看到，Asp.NET中如何使用這個元件進行檔案上傳的，當時上傳檔案的處理主要也是使用ashx一般處理程式來進行處理的。本文主要介紹我的Web開發

uploadify檔案上傳元件取消上傳按鈕圖片不顯示問題解決

低版本下，通過設定cancelImg引數，指向X圖片檔案所在的路徑。高版本（3.2.1）下，通過修改uploadify.css來解決，程式碼如下：.uploadify-queue-item .cancel a { background: url('uploadify-can

apache檔案上傳元件+oracle+SWFupload實現檔案上傳

  來韓國三個月了，最近做的專案中韓國人要求上傳的檔案儲存到資料庫，讓人難以接受的是在上傳選擇檔案的時候他們要求能夠同時實現多檔案選擇並上傳，多選這個問題我以前沒做過，google一下，發現有很多辦法，最終發現了SWFupload元件，於是問題解決，現貼出程式碼以供以後備用和