開發人員都知道<img src="">標簽,只要src指定相應路徑就能夠顯示圖片,但是這里有一個限制條件:如果項目被部署在服務器上(比如Java web項目部署在tomcat下)運行時,src路徑只能指定項目中的圖片。比如<img src="/common/java.jpg">表示顯示該項目下common目錄下的名為java.jpg的圖片。而如果你希望顯示服務器某個盤符下的指定圖片,比如<img src="c:\xxx\xx.jpg">,即使該目錄下有指定圖片,這樣寫也是找不到該圖片的,因為出于安全性考慮不能讀取當前項目以外的數據。
最近在做一個小項目玩,有個添加用戶功能,我需要上傳用戶圖片后在頁面顯示該用戶圖片。上傳功能已實現,代碼在這里可以看到: http://blessht.iteye.com/blog/1405057 ,為了防止圖片丟失,我的圖片是上傳到硬盤指定目錄下,現在的難題是如何把圖片顯示出來。
在網上看了很多解決方案,其中有一種方案我覺得很好:img標簽的src不是圖片路徑,而是一個servlet請求,該servlet通過java代碼讀取圖片并以流的形式將圖片數據打印到頁面,這樣就能顯示指定盤符下的圖片了。
首先看下運行效果:
??
?
- 實現說明
<script> ...... function openUpload_(){ openUpload(null,'JPG,GIF,JPEG,PNG','5',callback); } /** * 回調函數,獲取上傳文件信息 * realName真實文件名 * saveName文件保存名 * maxSize文件實際大小 */ function callback(realName,saveName,maxSize){ $("#photo_").val(saveName); $("#div_photo").load(root+"/showImage.jsp?saveName="+saveName+"&width_=200&height_=200"); } </script> ...... <tr> <td>頭像:</td> <td> <input type="hidden" name="photo" id="photo_"></input> <input type="button" onclick="openUpload_()" value="上傳"/> </td> </tr> <tr> <td colspan="2"> <div id="div_photo"></div> </td> </tr>
<body> <% String root = request.getContextPath(); String saveName = request.getParameter("saveName"); String width_ = request.getParameter("width_"); String height_ = request.getParameter("height_"); %> <img src="<%=root%>/CommonController.jhtml?method=showImage&saveName=<%=saveName%>" width="<%=width_%>" height="<%=height_%>"> </body>
/** * 顯示圖片 * @param request * @param response * @return * @throws ServletException * @throws IOException */ public ModeAndView showImage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String saveName = request.getParameter("saveName"); FileInputStream hFile = new FileInputStream(fileUploadPro.getProperty("filePath")+saveName); // 以byte流的方式打開文件 d:\1.gif int i=hFile.available(); //得到文件大小 byte data[]=new byte[i]; hFile.read(data); //讀數據 response.setContentType("image/*"); //設置返回的文件類型 OutputStream toClient=response.getOutputStream(); //得到向客戶端輸出二進制數據的對象 toClient.write(data); //輸出數據 toClient.flush(); toClient.close(); hFile.close(); return null; }
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
