Apache提供的commons-fileupload jar包實現檔案上傳確實很簡單，最近要用Servlet/JSP做一個圖片上傳功能，在網上找了很多資料，大多是基於struts架構介紹的，還有些雖然也介紹common-fileupload的上傳，但是那些例子比較老，有些類現在都廢棄了。
通過研究學習總結，終於完成了這個上傳功能，下面與大家分享一下。
案例情境
一個圖書館後台管理介面，需要提供上傳圖書圖片的功能並且最終顯示在頁面中。
實現效果
進入添加書籍頁面，預設顯示一個圖片“暫無突破”（長寬均為200px），提供一個按鈕“上傳圖片”，如下圖效果。
點擊“上傳圖片”按鈕，通過強制回應視窗彈出上傳介面，如下圖所示。
通過“瀏覽”按鈕選擇指定圖片，點擊“上傳”按鈕進行上傳，如果上傳成功則彈出成功提示，使用者點擊“確定”後關閉彈出窗並自動將新圖片顯示在頁面上，如下圖所示。
代碼實現
①首先建立一個添加書籍頁面：bookAdd.jsp
頁面id為photo_id的hidden標籤用於儲存圖片路徑，方便提交到後台存放到資料庫，id為img_id的<img>標籤用於顯示圖片，所有圖片都存放在伺服器下，方便讀取。然後一個關鍵js，點擊button通過強制回應視窗彈出上傳頁面，在彈出強制回應視窗時定義了一個變數win，該變數用於擷取強制回應視窗傳回的圖片路徑值。
（注意：因為安全性問題圖片不能圖片不能隨意存放，項目部署在伺服器中，圖片就只能放在該伺服器下才能查看得到，如果一定要讀取非當前伺服器下的圖片需要設定管理員的虛擬目錄）
<html> <head> <title>添加書籍</title> <script type="text/javascript"> //開啟上傳頁面 function openUpload(){ var win = window.showModalDialog("<%=root%>/Admin/bookUpload.jsp","","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no"); if(win != null){ document.getElementById("photo_id").value = win; document.getElementById("img_id").src = "<%=root%>/"+win; } } </script> </head> <body> <h5>添加書籍</h5><hr/> <p> 書的封面： <label> <input type="hidden" id="photo_id" name="photo" value="images/noimg.png"><input type="button" onclick="openUpload()" value="上傳圖片"/><br/> <img id="img_id" alt="" src="<%=root%>/images/noimg.png" width="200px" height="200px"> </label> </p> </body> </html>
②建立上傳圖片頁面，bookUpload.jsp
注意一定要定義<base>標籤，當前強制回應視窗關閉時才能將資料返回到父表單，<form>標籤還要設定一個屬性enctype="multipart/form-data"這樣提交的檔案才能被後台擷取，點擊“上傳”button即可將檔案向後台傳送，剩下的重頭戲就是後台上傳處理了。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <meta http-equiv="pragma" content="no-cache" /> <span style="color: #ff0000;"><base target="_self"></span> <title>書籍圖片上傳</title> </head> <body> <h5>圖片上傳</h5><hr/> <p style="color: red">${requestScope.errorMsg}</p> <form id="form1" name="form1" action="<%=root%>/BookServlet?type=bookUpload" method="post" enctype="multipart/form-data"> <div>注:圖片大小最大不能超過3M!</div> <div><input type="file" name="file_upload"/></div> <div><input type="submit" value="上傳"/></div> </form> </body> </html>
③建立一個普通的Servlet，下面只提供部分關鍵代碼
紅色代碼部分是上傳的關鍵代碼，其它就是作為點綴了。完成這三步，一個簡單的上傳即實現了。
public class BookServlet extends HttpServlet { private String uploadPath = "eShop/upload/"; // 上傳檔案的目錄 private String tempPath = "eShop/uploadtmp/"; // 臨時檔案目錄 private String serverPath = null; private int sizeMax = 3;//圖片最大上限 private String[] fileType = new String[]{".jpg",".gif",".bmp",".png",".jpeg",".ico"}; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { serverPath = getServletContext().getRealPath("/").replace("\\", "/"); //Servlet初始化時執行,如果上傳檔案目錄不存在則自動建立 if(!new File(serverPath+uploadPath).isDirectory()){ new File(serverPath+uploadPath).mkdirs(); } if(!new File(serverPath+tempPath).isDirectory()){ new File(serverPath+tempPath).mkdirs(); } <span style="color: #ff0000;">DiskFileItemFactory factory = new DiskFileItemFactory();</span> factory.setSizeThreshold(5*1024); //最大緩衝 factory.setRepository(new File(serverPath+tempPath));//臨時檔案目錄 <span style="color: #ff0000;">ServletFileUpload upload = new ServletFileUpload(factory);</span> upload.setSizeMax(sizeMax*1024*1024);//檔案最大上限 String filePath = null; try { <span style="color: #ff0000;">List<FileItem> items = upload.parseRequest(request);</span>//擷取所有檔案清單 for (FileItem item : items) { //獲得檔案名稱，這個檔案名稱包括路徑 <span style="color: #ff0000;">if(!item.isFormField()){</span> //檔案名稱 String fileName = item.getName().toLowerCase(); if(fileName.endsWith(fileType[0])||fileName.endsWith(fileType[1])||fileName.endsWith(fileType[2])||fileName.endsWith(fileType[3])||fileName.endsWith(fileType[4])||fileName.endsWith(fileType[5])){ String uuid = UUID.randomUUID().toString(); filePath = serverPath+uploadPath+uuid+fileName.substring(fileName.lastIndexOf(".")); <span style="color: #ff0000;">item.write(new File(filePath));</span> PrintWriter pw = response.getWriter(); pw.write("<script>alert('上傳成功');window.returnValue='"+uploadPath+uuid+fileName.substring(fileName.lastIndexOf("."))+"';window.close();</script>"); pw.flush(); pw.close(); }else{ request.setAttribute("errorMsg", "上傳失敗,請確認上傳的檔案存在並且類型是圖片!"); request.getRequestDispatcher("/Admin/bookUpload.jsp").forward(request, response); } } } } catch (Exception e) { e.printStackTrace(); request.setAttribute("errorMsg", "上傳失敗,請確認上傳的檔案大小不能超過"+sizeMax+"M"); request.getRequestDispatcher("/Admin/bookUpload.jsp").forward(request, response); } }
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
