Apache提供的commons-fileupload jar包實(shí)現(xiàn) 文件上傳 確實(shí)很簡單，最近要用Servlet/JSP做一個圖片上傳功能，在網(wǎng)上找了很多資料，大多是基于struts框架介紹的，還有些雖然也介紹common-fileupload的上傳，但是那些例子比較老，有些類現(xiàn)在都廢棄了。通過研究學(xué)習(xí)總結(jié)，終于完成了這個上傳功能，下面與大家分享一下。
?
?
- 案例場景
一個圖書館后臺管理界面，需要提供上傳圖書圖片的功能并且最終顯示在頁面中。
- 實(shí)現(xiàn)效果
進(jìn)入添加書籍頁面，默認(rèn)顯示一個圖片“暫無突破”（長寬均為200px），提供一個按鈕“上傳圖片”，如下圖效果。
?
點(diǎn)擊“上傳圖片”按鈕，通過模式窗口彈出上傳界面，如下圖所示。
?
通過“瀏覽”按鈕選擇指定圖片，點(diǎn)擊“上傳”按鈕進(jìn)行上傳，如果上傳成功則彈出成功提示，用戶點(diǎn)擊“確定”后關(guān)閉彈出窗并自動將新圖片顯示在頁面上，如下圖所示。
?
?
- 代碼實(shí)現(xiàn)
①首先創(chuàng)建一個添加書籍頁面：bookAdd.jsp
頁面id為photo_id的hidden標(biāo)簽用于存儲圖片路徑，方便提交到后臺存放到數(shù)據(jù)庫，id為img_id的<img>標(biāo)簽用于顯示圖片，所有圖片都存放在服務(wù)器下，方便讀取。然后一個關(guān)鍵js，點(diǎn)擊button通過模式窗口彈出上傳頁面，在彈出模式窗口時定義了一個變量win，該變量用于獲取模式窗口傳回的圖片路徑值。
（注意：因?yàn)榘踩詥栴}圖片不能圖片不能隨意存放，項目部署在服務(wù)器中，圖片就只能放在該服務(wù)器下才能查看得到，如果一定要讀取非當(dāng)前服務(wù)器下的圖片需要配置服務(wù)器的虛擬目錄）
<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>
?
②創(chuàng)建上傳圖片頁面，bookUpload.jsp
注意一定要定義<base>標(biāo)簽，當(dāng)前模式窗口關(guān)閉時才能將數(shù)據(jù)返回到父窗體，<form>標(biāo)簽還要設(shè)置一個屬性enctype="multipart/form-data"這樣提交的文件才能被后臺獲取，點(diǎn)擊“上傳”button即可將文件向后臺傳送，剩下的重頭戲就是后臺上傳處理了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta http-equiv="pragma" content="no-cache" />
<base target="_self">
<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>
?
③創(chuàng)建一個普通的Servlet，下面只提供部分關(guān)鍵代碼
紅色代碼部分是上傳的關(guān)鍵代碼，其它就是作為點(diǎn)綴了。完成這三步，一個簡單的上傳即實(shí)現(xiàn)了。
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初始化時執(zhí)行,如果上傳文件目錄不存在則自動創(chuàng)建
if(!new File(serverPath+uploadPath).isDirectory()){
new File(serverPath+uploadPath).mkdirs();
}
if(!new File(serverPath+tempPath).isDirectory()){
new File(serverPath+tempPath).mkdirs();
}
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(5*1024); //最大緩存
factory.setRepository(new File(serverPath+tempPath));//臨時文件目錄
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setSizeMax(sizeMax*1024*1024);//文件最大上限
String filePath = null;
try {
List<FileItem> items = upload.parseRequest(request);
//獲取所有文件列表
for (FileItem item : items) {
//獲得文件名，這個文件名包括路徑
if(!item.isFormField()){
//文件名
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("."));
item.write(new File(filePath));
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", "上傳失敗,請確認(rèn)上傳的文件存在并且類型是圖片!");
request.getRequestDispatcher("/Admin/bookUpload.jsp").forward(request,
response);
}
}
}
} catch (Exception e) {
e.printStackTrace();
request.setAttribute("errorMsg", "上傳失敗,請確認(rèn)上傳的文件大小不能超過"+sizeMax+"M");
request.getRequestDispatcher("/Admin/bookUpload.jsp").forward(request,
response);
}
}
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
