客戶端的檔案上傳

12
客客客客客客客客 客客客客客客客客 HTML HTML 客客客客客客客 客客客客客客客 客客 客客 Java I/O Java I/O 客客客客客客 客客客客客客 客客 客客 JSP JSP 客客客客客客客客客客 客客客客客客客客客客

description

客戶端的檔案上傳. HTML 的檔案欄位標籤 使用 Java I/O 類別上傳檔案 使用 JSP 檔案上傳套件上傳檔案. HTML 的檔案欄位標籤. HTML 檔案欄位可以在瀏覽程式檢視或選擇客戶端的檔案清單,選擇的檔案是儲存在客戶端電腦,然後將選擇檔案以 HTTP POST 方法上傳到 Web 伺服器,其基本語法如下所示: 檔案欄位的主要目的是上傳檔案,所以表單 標籤需要設定 enctype 屬性,如下所示: - PowerPoint PPT Presentation

Transcript of 客戶端的檔案上傳

Page 1: 客戶端的檔案上傳

客戶端的檔案上傳客戶端的檔案上傳

HTMLHTML 的檔案欄位標籤的檔案欄位標籤 使用使用 Java I/OJava I/O 類別上傳檔案類別上傳檔案 使用使用 JSPJSP 檔案上傳套件上傳檔案檔案上傳套件上傳檔案

Page 2: 客戶端的檔案上傳

HTMLHTML 的檔案欄位標籤的檔案欄位標籤 HTMLHTML 檔案欄位可以在瀏覽程式檢視或選擇客戶檔案欄位可以在瀏覽程式檢視或選擇客戶

端的檔案清單,選擇的檔案是儲存在客戶端電腦,端的檔案清單,選擇的檔案是儲存在客戶端電腦,然後將選擇檔案以然後將選擇檔案以 HTTP POSTHTTP POST 方法上傳到方法上傳到 WebWeb伺服器,其基本語法如下所示:伺服器,其基本語法如下所示:

<input type="FILE" name="field_name"><input type="FILE" name="field_name"> 檔案欄位的主要目的是上傳檔案,所以表單檔案欄位的主要目的是上傳檔案,所以表單

<form><form> 標籤需要設定標籤需要設定 enctypeenctype 屬性,如下所屬性,如下所示:示:

<form action="filename.jsp" method="post" <form action="filename.jsp" method="post" enctype="multipart/form-data">enctype="multipart/form-data">

表單的處理程式為表單的處理程式為 JSPJSP 程式,使用程式,使用 postpost 方法送出,方法送出,encytypeencytype 屬性為上傳檔案資料的編碼方式。屬性為上傳檔案資料的編碼方式。

Page 3: 客戶端的檔案上傳

使用使用 Java I/OJava I/O 類別上傳檔案類別上傳檔案 -- 開開啟串流啟串流

在建立上傳檔案的在建立上傳檔案的 HTMLHTML 表單後,表單處理的表單後,表單處理的JSPJSP 程式可以使用程式可以使用 Java I/OJava I/O 類別將上傳檔案資料類別將上傳檔案資料寫成伺服端的檔案。首先取得輸入串流,如下所寫成伺服端的檔案。首先取得輸入串流,如下所示:示:

ServletInputStream in = ServletInputStream in = request.getInputStream();request.getInputStream();

程式碼使用程式碼使用 requestrequest 物件的物件的 getInputStream()getInputStream()方法取得方法取得 ServletInputStreamServletInputStream 的輸入串流,這的輸入串流,這就是客戶端上傳檔案的送出的檔案串流。就是客戶端上傳檔案的送出的檔案串流。

接著可以在伺服端開啟檔案輸出串流,如下:接著可以在伺服端開啟檔案輸出串流,如下:PrintWriter pw = new PrintWriter(PrintWriter pw = new PrintWriter(new BufferedWriter(new FileWriter(name)));new BufferedWriter(new FileWriter(name)));

Page 4: 客戶端的檔案上傳

使用使用 Java I/OJava I/O 類別上傳檔案類別上傳檔案 -- 上上傳檔案傳檔案

最後使用最後使用 whilewhile 迴圈建立伺服端檔案,如迴圈建立伺服端檔案,如下所示:下所示:

while ((ch = in.read()) != -1)while ((ch = in.read()) != -1)

pw.print((char) ch);pw.print((char) ch); 上述上述 whilewhile 迴圈使用迴圈使用 read()read() 方法從方法從

ServletInputStreamServletInputStream 讀入資料後,馬上讀入資料後,馬上將它使用將它使用 print()print() 方法寫入方法寫入 PrintWriterPrintWriter 串串流的伺服端檔案。流的伺服端檔案。

Page 5: 客戶端的檔案上傳

範例範例 <form action="Ch12_3_3.jsp" method="POST" <form action="Ch12_3_3.jsp" method="POST" enctype="multipart/form-data">enctype="multipart/form-data"> 選擇上傳檔案選擇上傳檔案 : <input type="FILE" : <input type="FILE"

name="file1"><br>name="file1"><br> 選擇上傳檔案選擇上傳檔案 : <input type="FILE" : <input type="FILE"

name="file2"><br>name="file2"><br> 選擇上傳檔案選擇上傳檔案 : <input type="FILE" : <input type="FILE"

name="file3"><br>name="file3"><br> 上傳檔案說明上傳檔案說明 : <input type="TEXT" : <input type="TEXT"

name="description"><br><br>name="description"><br><br> <input type="submit" name="Upload" value="<input type="submit" name="Upload" value=" 上上

傳檔案傳檔案 ">"> </form><hr></form><hr>

Page 6: 客戶端的檔案上傳

範例範例 <!-- JSP<!-- JSP 程式:程式: Ch12_3_2.jsp -->Ch12_3_2.jsp --> <%@ page contentType="text/html; charset=MS950"<%@ page contentType="text/html; charset=MS950" import="java.io.*"%>import="java.io.*"%> <html><html> <head><title>Ch12_3_2</title></head><head><title>Ch12_3_2</title></head> <body><body> <%<% // // 輸出的檔案名稱輸出的檔案名稱 String name=application.getRealPath("/a.txt");String name=application.getRealPath("/a.txt"); String file_name=request.getParameter("file1");String file_name=request.getParameter("file1"); out.println(file_name);out.println(file_name); // // 取得輸入串流取得輸入串流 ServletInputStream in = request.getInputStream();ServletInputStream in = request.getInputStream();

// // 建立建立 BufferedWriterBufferedWriter 的輸出串流物件的輸出串流物件 PrintWriter pw = new PrintWriter(new BufferedWriter(new FileWriter(name)));PrintWriter pw = new PrintWriter(new BufferedWriter(new FileWriter(name))); int ch;int ch; // // 將輸入串流的資料寫入檔案將輸入串流的資料寫入檔案 while ((ch = in.read()) != -1)while ((ch = in.read()) != -1) pw.print((char)ch);pw.print((char)ch); pw.close(); // pw.close(); // 關閉串流關閉串流 out.print("out.print(" 上傳檔案成功上傳檔案成功 ..."+name+"<br>");..."+name+"<br>"); %>%> </body></body> </html></html>

Page 7: 客戶端的檔案上傳

使用使用 JSPJSP 檔案上傳套件上傳檔檔案上傳套件上傳檔案案 -- 下載與安裝下載與安裝 O’ReillyO’Reilly 上傳套件上傳套件

O’ReillyO’Reilly 上傳套件是由上傳套件是由 Jason HunterJason Hunter 開發的開發的 JavaJava 套件,套件,可以免費下載使用在非商業用途的可以免費下載使用在非商業用途的 WebWeb 應用程式,免費應用程式,免費下載網址如下所示:下載網址如下所示:

http://www.servlets.com/cos/http://www.servlets.com/cos/ 上述網址可下載最新版的上傳套件,下載檔案是上述網址可下載最新版的上傳套件,下載檔案是 ZIPZIP 格式格式

壓縮檔,教學網頁上的版本是壓縮檔,教學網頁上的版本是 20022002年年 1111 月版,檔案名月版,檔案名稱為稱為 cos-05Nov2002.zipcos-05Nov2002.zip 。。

O’ReillyO’Reilly 上傳套件的安裝十分簡單,只需將檔案解壓縮到上傳套件的安裝十分簡單,只需將檔案解壓縮到WebWeb 應用程式的「應用程式的「 WEB-INFWEB-INF 」資料夾即可,這是一些安」資料夾即可,這是一些安裝在裝在 classesclasses 資料夾下,屬於資料夾下,屬於 com.oreilly.servlet.*com.oreilly.servlet.* 套套件的件的 JavaJava 類別檔。類別檔。

例如例如 :: 將壓縮檔內的將壓縮檔內的 classesclasses 資料夾移入某專案檔內資料夾移入某專案檔內 c:\workspace\c:\workspace\file_up\WEB-INF\classesfile_up\WEB-INF\classes

(( 請使用請使用 refreshrefresh 確保能正確的確保能正確的 import)import)

Page 8: 客戶端的檔案上傳

使用使用 JSPJSP 檔案上傳套件上傳檔案檔案上傳套件上傳檔案 --建立建立 MultipartRequestMultipartRequest 物件物件

使用使用 O’ReillyO’Reilly 上傳套件同時上傳多個檔案上傳套件同時上傳多個檔案 JSPJSP 程式可以使用程式可以使用 pagepage 指引元素匯入套件的指引元素匯入套件的

MultipartRequestMultipartRequest 類別,如下所示:類別,如下所示:<%@ page<%@ pageimport="com.oreilly.servlet.MultipartRequestimport="com.oreilly.servlet.MultipartRequest

““%>%> 接下來可以建立接下來可以建立 MultipartRequestMultipartRequest 物件取得上傳物件取得上傳

檔案和檔案的相關資訊,如下所示:檔案和檔案的相關資訊,如下所示:MultipartRequest mreq = newMultipartRequest mreq = new MultipartRequest(MultipartRequest( request,path,maxSize,"MS950");request,path,maxSize,"MS950");

Page 9: 客戶端的檔案上傳

使用使用 JSPJSP 檔案上傳套件上傳檔案檔案上傳套件上傳檔案 --MultipartRequestMultipartRequest 物件方法物件方法方法 說明

String getParameter(String) 取得名為 String的表單欄位值,傳回值null,表示欄位不存在

Enumeration getParameterNames() 取得所有表單欄位名稱的 Enumeration物件String[]

getParameterValues(String)取得參數 String表單欄位的所有內容,傳

回值 null,表示欄位不存在Enumeration getFileNames() 取得所有 HTML檔案標籤 name屬性名稱

的 Enumeration物件String getFilesystemName(String) 取得參數 String檔案標籤 name屬性名稱的

上傳檔案名稱String getContextType(String) 取得參數 String檔案標籤 name屬性名稱的

上傳檔案的MIME型態File getFile(String) 取得參數 String檔案標籤 name屬性名稱的

File物件

Page 10: 客戶端的檔案上傳

範例範例 <%@page import="com.oreilly.servlet.MultipartRequest"%><%@page import="com.oreilly.servlet.MultipartRequest"%> <%@page contentType="text/html" pageEncoding="UTF-8"%><%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><html> <head><head> <title>File_Chinese.jsp</title><title>File_Chinese.jsp</title> </head></head> <body><body> testtest <% <% // // 宣告將上傳之檔案放置到伺服器的目錄中宣告將上傳之檔案放置到伺服器的目錄中 // // 宣告限制上傳之檔案大小為 宣告限制上傳之檔案大小為 50 MB50 MB String saveDirectory = "c:\\test"; //String saveDirectory =aplication.getRealPath(“/”);String saveDirectory = "c:\\test"; //String saveDirectory =aplication.getRealPath(“/”); int maxPostSize = 50 * 1024 * 1024 ;int maxPostSize = 50 * 1024 * 1024 ; // // 宣告上傳檔案名稱宣告上傳檔案名稱 String strFileName = null;String strFileName = null; // // 宣告上傳檔案型態宣告上傳檔案型態 String strContentType = null;String strContentType = null; // // 宣告敘述上傳檔案內容敘述宣告敘述上傳檔案內容敘述 String strDescription = null;String strDescription = null; // // 為為 Big5Big5或或MS950MS950 則支援中文檔名則支援中文檔名 String enCoding = "MS950";String enCoding = "MS950"; out.println("Yes");out.println("Yes"); // // 產一個新的產一個新的 MultipartRequest MultipartRequest 的物件,的物件, multimulti MultipartRequest multi = new MultipartRequest(request, saveDirectory, maxPostSize, enCoding); MultipartRequest multi = new MultipartRequest(request, saveDirectory, maxPostSize, enCoding); // // 取得所有上傳之檔案輸入型態名稱及敘述取得所有上傳之檔案輸入型態名稱及敘述 strFileName = multi.getFilesystemName("File1");strFileName = multi.getFilesystemName("File1"); strContentType = multi.getContentType("File1");strContentType = multi.getContentType("File1"); strDescription = multi.getParameter("Desc1");strDescription = multi.getParameter("Desc1"); out.print("out.print(" 檔案名稱為:檔案名稱為: "+ strFileName+" "+ strFileName+" 檔案型態為:檔案型態為: "+ strContentType +"+ strContentType + "" 檔案的敘述:檔案的敘述: "+strDescription +"<br>");"+strDescription +"<br>"); %>%> </body></body> </html> </html>

Page 11: 客戶端的檔案上傳

使用使用 JSPJSP 檔案上傳套件上傳檔案檔案上傳套件上傳檔案 --處理多個上傳檔案處理多個上傳檔案

在在 HTMLHTML 表單上傳的檔案可能不只一個,表單上傳的檔案可能不只一個, JSPJSP 程程式可以使用式可以使用 getFileNames()getFileNames() 方法取得所有方法取得所有HTMLHTML 檔案標籤檔案標籤 namename 屬性值的屬性值的 EnumerationEnumeration物件,然後配合物件,然後配合 whilewhile 迴圈取出所有上傳檔案的迴圈取出所有上傳檔案的相關資訊,如下所示:相關資訊,如下所示:

Enumeration files = mreq.getFileNames();Enumeration files = mreq.getFileNames();

while ( files.hasMoreElements() ) {while ( files.hasMoreElements() ) {

String name = (String)files.nextElement();String name = (String)files.nextElement();

………… …………..

}}

Page 12: 客戶端的檔案上傳

範例範例 <!-- JSP<!-- JSP 程式:程式: Ch12_3_3.jsp -->Ch12_3_3.jsp --> <%@ page contentType="text/html; charset=MS950"%><%@ page contentType="text/html; charset=MS950"%> <%@ page import="java.util.*"%><%@ page import="java.util.*"%> <%@ page import="com.oreilly.servlet.MultipartRequest"%><%@ page import="com.oreilly.servlet.MultipartRequest"%> <html><html> <head><title>Ch12_3_3.jsp</title></head><head><title>Ch12_3_3.jsp</title></head> <body><body> <%<% int fcount = 0; // int fcount = 0; // 計算上傳檔案數計算上傳檔案數 // // 指定上傳目錄指定上傳目錄 String path = application.getRealPath("/"); String path = application.getRealPath("/"); int maxSize = 2*1024*1024; // int maxSize = 2*1024*1024; // 上傳檔案最大尺寸為上傳檔案最大尺寸為 2MB2MB // // 建立建立 MultipartRequestMultipartRequest 物件物件 MultipartRequest mreq = new MultipartRequest(request, path, maxSize, "MS950");MultipartRequest mreq = new MultipartRequest(request, path, maxSize, "MS950"); // // 取得表單欄位值取得表單欄位值 String str = mreq.getParameter("description");String str = mreq.getParameter("description"); out.print("out.print(" 說明說明 : " + str + "<br>");: " + str + "<br>"); // // 使用使用 EnumerationEnumeration 物件取得上傳檔案資訊物件取得上傳檔案資訊 Enumeration files = mreq.getFileNames();Enumeration files = mreq.getFileNames(); while ( files.hasMoreElements() ) {while ( files.hasMoreElements() ) { String name = (String)files.nextElement();String name = (String)files.nextElement(); str = mreq.getFilesystemName(name); // str = mreq.getFilesystemName(name); // 取得檔名取得檔名 if ( str != null ) { // if ( str != null ) { // 檔名不是檔名不是 nullnull fcount++; // fcount++; // 上傳檔案數加一上傳檔案數加一 out.print("out.print(" 編號編號 : (" + fcount + ")<br>");: (" + fcount + ")<br>"); out.print("out.print(" 檔名檔名 : " + str + "<br>");: " + str + "<br>"); str = mreq.getContentType(name); // str = mreq.getContentType(name); // 取得型態取得型態 out.print("out.print(" 型態型態 : " + str + "<br>");: " + str + "<br>"); } } }} out.print("out.print(" 上傳檔案數上傳檔案數 : " + fcount + "<br>");: " + fcount + "<br>"); %>%> </body></body> </html></html>