什麼是檔案上傳？
檔案上傳就是把使用者的資訊儲存起來。
為什麼需要檔案上傳？
在使用者註冊的時候，可能需要使用者提交照片。那麼這張照片就應該要進行儲存。
上傳元件(工具)
為什麼我們要使用上傳工具？
為啥我們需要上傳元件呢？當我們要獲取客戶端的資料，我們一般是通過getParameter()方法來獲取的。
上傳檔案資料是經過MIME協議進行分割的，表單進行了二進位制封裝。也就是說：getParameter()無法獲取得到上傳檔案的資料。
我們首先來看看檔案上傳http是怎麼把資料帶過去的
- jsp頁面，表單一定要指定enctype:multipart/form-data
<form action="${pageContext.request.contextPath }/servlet/UploadServlet1" enctype="multipart/form-data" method="post">
上傳使用者：<input type="text" name="username"><br/>
上傳檔案1：<input type="file" name="file1"><br/>
上傳檔案2：<input type="file" name="file2"><br/>
<input type="submit" value="提交">
</form>
複製程式碼- http抓包
- 嘗試在Servlet上使用getParameter()獲取資料
String ss = request.getParameter("username");
System.out.println(ss);
複製程式碼- 直接使用getParameter是獲取不到資料的。
那麼我們要怎麼辦呢？？？？request物件提供了ServletInputStream流給我們讀取資料
- 我們試著讀取下檔案
ServletInputStream inputStream = request.getInputStream();
byte[] bytes = new byte[1024];
int len = 0;
while ((len = inputStream.read(bytes)) > 0) {
System.out.println(new String(bytes, 0, len));
}
複製程式碼- 在jsp頁面多增添一個input控制元件
<input type="text" name="password">
複製程式碼- 我上傳的文字檔案內容就是111111，讀取效果如下：
現在我們能夠讀取上傳檔案的資料了，但是現在問題又來了：**怎麼把檔案上傳個資料和普通傳送給伺服器的資料分割開來呢？？？**上面在圖上我們已經看到了，他們是混合在一起的。
按我們平常的做法是很難分割開來的，所以我們需要上傳元件
上傳元件有兩種
- FileUpload【操作比較複雜】
- SamrtUpload【操作比較簡單】
FileUpload
要使用FileUpload元件，就需要匯入兩個jar包
- commons-io
- Commons-fileupload
開發步驟
- 建立解析器工廠物件【DiskFileItemFactory】
- 通過解析器工廠建立解析器【ServletFileUpload】
- 呼叫解析器方法解析request物件，得到所有上傳的內容【list】
- 遍歷list，判斷每個物件是否是上傳檔案
- 如果是普通表單欄位，得到欄位名和欄位值
- 如果是上傳檔案，呼叫InputSteam方法得到輸入流，讀取上傳的資料
快速入門
try{
//1.得到解析器工廠
DiskFileItemFactory factory = new DiskFileItemFactory();
//2.得到解析器
ServletFileUpload upload = new ServletFileUpload(factory);
//3.判斷上傳表單的型別
if(!upload.isMultipartContent(request)){
//上傳表單為普通表單，則按照傳統方式獲取資料即可
return;
}
//為上傳表單，則呼叫解析器解析上傳資料
List<FileItem> list = upload.parseRequest(request); //FileItem
//遍歷list，得到用於封裝第一個上傳輸入項資料fileItem物件
for(FileItem item : list){
if(item.isFormField()){
//得到的是普通輸入項
String name = item.getFieldName(); //得到輸入項的名稱
String value = item.getString();
System.out.println(name + "=" + value);
}else{
//得到上傳輸入項
String filename = item.getName(); //得到上傳檔名 C:\Documents and Settings\ThinkPad\桌面\1.txt
filename = filename.substring(filename.lastIndexOf("\\")+1);
InputStream in = item.getInputStream(); //得到上傳資料
int len = 0;
byte buffer[]= new byte[1024];
String savepath = this.getServletContext().getRealPath("/upload");
FileOutputStream out = new FileOutputStream(savepath + "\\" + filename); //向upload目錄中寫入檔案
while((len=in.read(buffer))>0){
out.write(buffer, 0, len);
}
in.close();
out.close();
}
}
}catch (Exception e) {
e.printStackTrace();
}
複製程式碼測試
- 普通的欄位和上傳的檔案都能讀取得到了！
SmartUpload
要使用SmartUpload元件，就需要匯入smartupload.jar開發包
快速入門
//例項化元件
SmartUpload smartUpload = new SmartUpload();
//初始化上傳操作
smartUpload.initialize(this.getServletConfig(), request, response);
try {
//上傳準備
smartUpload.upload();
//對於普通資料，單純到request物件是無法獲取得到提交引數的。也是需要依賴smartUpload
String password = smartUpload.getRequest().getParameter("password");
System.out.println(password);
//上傳到uploadFile資料夾中
smartUpload.save("uploadFile");
} catch (SmartUploadException e) {
e.printStackTrace();
}
複製程式碼測試
同樣地，我們可以上傳檔案到uploadFile資料夾中。程式碼量也的確減少很多！
也能夠獲取普通欄位的引數
上傳檔名的中文亂碼和上傳資料的中文亂碼
- 我把檔名改成中文，就亂碼了：
- 表單提交過來的中文資料也亂碼了。
上面已經說了，上傳檔案的資料的表單進行了二進位制封裝，所以使用request對資料編碼編碼，對於表單提交過來的資料是不奏效的！
FileUpload解決亂碼
使用FileUpload解決亂碼問題是十分簡單的
- 解決中文檔名亂碼，得到解析器以後，就直接設定解析器的編碼為UTF-8就行了！
//設定upload的編碼
fileUpload.setHeaderEncoding("UTF-8");
複製程式碼- 解決表單資料亂碼，在獲取表單值的時候，按照UTF-8編碼來獲取
String value = fileItem.getString("UTF-8");
複製程式碼效果：
SmartUpload解決亂碼
這個元件解決亂碼問題有點麻煩，在網上找了各種辦法也沒找到簡單的......
所以，如果資料不涉及到中文就使用SmartUpload元件，涉及到中文資料就使用FileUpload元件吧！
多個檔案上傳，動態新增上傳控制元件
假設我現在有多個檔案要上傳，而且要上傳的個數是不確定的。那麼我們要怎麼辦呢？？？
我們不可能列出很多很多個上傳檔案的控制元件在頁面上，這樣不美觀。如果使用者用不到那麼多個控制元件，也浪費呀。
所以，我們想要動態地增添上傳檔案的控制元件，如果使用者還想要上傳檔案，只需要動態地生成控制元件出來即可！
分析
要想在頁面上動態地生成控制元件，無非就是使用JavaScript程式碼。
那麼我們要怎麼做呢？？
這樣子吧：當使用者想要上傳檔案的時候，就點選按鈕，按鈕繫結事件，生成檔案上傳的控制元件。
為了做得更加完善，每當生成了檔案上傳的控制元件，也提供一個刪除按鈕，刪除該控制元件！
我們應該使用div裝載著我們要生成的控制元件和刪除按鈕，而使用者點選刪除的時候，應該是要把刪除按鈕和檔案上傳控制元件都一起隱藏起來的。所以，最好就是使用巢狀div！
程式碼
- 頁面程式碼：
<table border="1px">
<tr>
<td>上傳使用者：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>新增上傳檔案</td>
<td><input type="button" value="新增上傳檔案" onclick="addUploadFile()"> </td>
</tr>
<tr>
<td>
<div id="file">
</div>
</td>
</tr>
</table>
複製程式碼- javaScript程式碼
<script type="text/javascript">
function addUploadFile() {
//生成檔案上傳控制元件
var input = document.createElement("input");
input.type = 'file';
input.name = 'fileName';
//生成刪除按鈕
var del = document.createElement("input");
del.type = 'button';
del.value = '刪除';
//生成內部的div
var innerDiv = document.createElement("div");
//將兩個控制元件繫結到內部div上
innerDiv.appendChild(input);
innerDiv.appendChild(del);
//得到外部div控制元件，並將內部div繫結到外部div上
var outterDiv = document.getElementById("file");
outterDiv.appendChild(innerDiv);
//為刪除按鈕繫結事件
del.onclick = function dele() {
//呼叫外界div的remove方法把內部的div幹掉
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
</script>
複製程式碼檔案上傳細節
- 如果上傳檔案的大小大於我們設定檔案的大小，那麼檔案在上傳的時候會使用臨時檔案儲存上傳資料。在上傳完畢後，我們應該刪除臨時檔案
- 上傳檔案的位置是不能在WEB伺服器管理之下的，否則可能造成安全問題【其他人有可能通過手段來修改上傳檔案】
- 如果上傳檔名相同，那麼就會把原本的上傳檔案覆蓋掉。我們要生成一個獨一無二的檔名。
- 如果使用者量很大，上傳檔案非常多。那麼我們不應該在一個目錄儲存所有的上傳檔案，這樣很可能造成磁碟奔潰了。所以我們要把上傳的檔案打散到不同的目錄下。
分析
刪除臨時檔案問題是非常簡單的，只需要在所有的操作完畢之後，呼叫FileItem的delete()方法即可
讓上傳檔案的位置不能在WEB伺服器管理之下，我們把上傳檔案的位置放到WEB-INF/目錄下即可！
檔名相同的問題，我們可以使用UUID+使用者上傳的檔名來作為我們儲存上傳檔名。這樣的檔名就是獨一無二的了。
要將上傳的檔案進行打散，那麼我們需要使用HashCode演算法來進行打散。
- 低四位生成一級目錄
- 5-8位生成二級目錄
程式碼
下面我們寫一個比較完善的上傳檔案程式碼
- 使用hashCode演算法來打散儲存的目錄
private String makeDirPath(String fileName, String path) {
//通過檔名來算出一級目錄和二級目錄
int hashCode = fileName.hashCode();
int dir1 = hashCode & 0xf;
int dir2 = (hashCode & 0xf0) >> 4;
String dir = path + "\\" + dir1 + "\\" + dir2;
//如果該目錄不存在，就建立目錄
File file = new File(dir);
if (!file.exists()) {
file.mkdirs();
}
//返回全路徑
return dir;
}
複製程式碼- 生成獨一無二的檔名
private String makeFileName(String fileName) {
//使用下劃線把UUID和檔名分割開來，後面可能會解析檔名的。
return UUID.randomUUID().toString() + "_"+ fileName;
}
複製程式碼- 上傳的程式碼
//建立工廠
DiskFileItemFactory factory = new DiskFileItemFactory();
//通過工廠建立解析器
ServletFileUpload fileUpload = new ServletFileUpload(factory);
//設定upload的編碼
fileUpload.setHeaderEncoding("UTF-8");
//判斷上傳表單的型別
if(!fileUpload.isMultipartContent(request)){
//上傳表單為普通表單，則按照傳統方式獲取資料即可
return;
}
try {
//解析request物件，得到List【裝載著上傳的全部內容】
List<FileItem> list = fileUpload.parseRequest(request);
//遍歷List，判斷裝載的內容是普通欄位還是上傳檔案
for (FileItem fileItem : list) {
//如果是普通輸入項
if (fileItem.isFormField()) {
//得到輸入項的名稱和值
String name = fileItem.getFieldName();
String value = fileItem.getString("UTF-8");
System.out.println(name + " = " + value);
} else {
//如果是上傳檔案
//得到上傳名稱【包括路徑名】
String fileName = fileItem.getName();
//擷取檔名
fileName = fileName.substring(fileName.lastIndexOf("\\") + 1);
//生成獨一無二的檔名
fileName = makeFileName(fileName);
InputStream inputStream = fileItem.getInputStream();
//得到專案的路徑，把上傳檔案寫到專案中
String path = this.getServletContext().getRealPath("/WEB-INF/uploadFile");
//得到分散後的目錄路徑
String realPath = makeDirPath(fileName, path);
FileOutputStream outputStream = new FileOutputStream(realPath + "\\" + fileName);
byte[] bytes = new byte[1024];
int len = 0;
while ((len = inputStream.read(bytes)) > 0) {
outputStream.write(bytes, 0, len);
}
inputStream.close();
outputStream.close();
//刪除臨時檔案的資料
fileItem.delete();
}
}
} catch (FileUploadException e) {
e.printStackTrace();
}
複製程式碼效果：
- 成功把目錄打散，檔名也是獨一無二的了。
列出上傳目錄下的檔案，提供下載
在講解respose物件的時候已經講解過檔案下載了。這次我們就直接寫一個小案例來鞏固檔案下載把。
- 上傳目錄下的檔案有3個
分析
首先，要把目錄下的檔案都列出來。由於後面要根據檔名對檔案進行下載，所以我們用一個Map集合來儲存所有的檔案
下載檔案部分也很簡單，根據檔名和上傳檔案位置找到對應的檔案，對其進行讀寫，然後修改訊息頭實現下載就好了。
- 得到裝載上傳檔案的路徑，通過遞迴把所有的檔案都查詢出來（判斷是否是檔案就是遞迴出口），裝載到Map集合中
- 將Map集合傳到前臺做展示
- 使用者點選下載的時候，再根據原名來獲取絕對路徑
- 如果該資源是存在的，就允許使用者下載
程式碼
- 將存放在WEB-INF/目錄下的檔案全部放在Map集合中
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//得到上傳檔案的目錄
String filePath = this.getServletContext().getRealPath("/WEB-INF/uploadFile");
Map map = new HashMap();
//使用遞迴來得到所有的檔案，並新增到Map集合中
getAllFiles(new File(filePath), map);
request.setAttribute("map", map);
request.getRequestDispatcher("/listFile.jsp").forward(request, response);
}
private void getAllFiles(File filePath, Map map) {
//如果不是檔案，那麼它就是資料夾
if (!filePath.isFile()) {
//列出資料夾下所有的檔案（可能是檔案，可能是資料夾）
File[] files = filePath.listFiles();
for (File file : files) {
//得到的檔案（或者是資料夾）再對其進行判斷
getAllFiles(file, map);
}
} else {
//進入到else語句了，肯定是檔案了
//得到檔名
String fileName = filePath.getName().substring(filePath.getName().lastIndexOf("_") + 1);
//我們將檔案全名作為key，檔名作為value儲存在map集合中
map.put(filePath.getName(), fileName);
}
}
複製程式碼- 在JSP頁面中顯示可以下載的檔案
<c:forEach items="${map}" var="me">
<c:url var="url" value="/DownFileServlet">
<c:param name="fileName" value="${me.key}"></c:param>
</c:url>
${me.value}<a href="${url}">下載！</a><br>
</c:forEach>
複製程式碼- 實現下載的Servlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//得到檔案的全名
String fileName = request.getParameter("fileName");
//如果是中文資料，需要轉碼。
fileName = new String(fileName.getBytes("ISO8859-1"), "utf-8");
//得到儲存檔案的位置
String path = this.getServletContext().getRealPath("/WEB-INF/uploadFile");
//檔案是通過檔名進行hashCode打散儲存的，通過檔名拿到檔案絕對路徑
String fileRealPath = makeFilePath(fileName, path);
System.out.println(fileRealPath);
//判斷檔案是否存在
File file = new File(fileRealPath);
if (!file.exists()) {
request.setAttribute("message", "您要下載的資源不存在了！");
request.getRequestDispatcher("/message.jsp").forward(request, response);
return ;
}
//存在
//讀取該檔案並把資料寫給瀏覽器
FileInputStream inputStream = new FileInputStream(fileRealPath);
byte[] bytes = new byte[1024];
int len = 0;
while ((len = inputStream.read(bytes)) > 0) {
response.getOutputStream().write(bytes, 0, len);
}
inputStream.close();
//設定訊息頭，告訴瀏覽器，這是下載的檔案
String name = fileName.substring(fileName.lastIndexOf("_") + 1);
response.setHeader("content-disposition","attachment;filename=" + URLEncoder.encode(name, "UTF-8"));
}
private String makeFilePath(String fileName, String path) {
int hashCode = fileName.hashCode();
int dir1 = hashCode & 0xf;
int dir2 = (hashCode & 0xf0) >> 4;
String dir = path + "\\" + dir1 + "\\" + dir2 +"\\"+ fileName;
return dir;
}
複製程式碼效果
如果文章有錯的地方歡迎指正，大家互相交流。習慣在微信看技術文章的同學，可以關注微信公眾號:Java3y