總結：JSP頁面img圖片緩衝問題現象表述及問題解決__JSP

JSP頁面img圖片緩衝問題現象表述及問題解決

l  問題表述：

當對含有頭像的客服人員資訊進行修改(含對頭像資訊的修改)後，重新開啟資料修改介面，發現常值內容修改成功，而頭像內容仍然顯示為原來的頭像——資料庫中的對應資訊頭像所在欄位資料已經成功更新。

 

l  前提：

jsp頁面中進行了頁面緩衝清除處理：

<meta http-equiv="pragma" content="no-cache"/>

<meta http-equiv="cache-control" content="no-cache"/>

<meta http-equiv="expires" content="0"/>

當然，下邊3行代碼功能與上邊的3行功能相同，頁面中僅寫一份

<%

response.setHeader("Pragma","No-Cache");

response.setHeader("Cache-Control","No-Cache");

response.setDateHeader("Expires", 0);  

%>

 

l  問題情景再現：

原jsp中img src寫法：

<img src="<%=path%>/servlet/customer/personPic?cspId=${cspId}"></img>

 

要修改的資料介面：

 

修改資料後，再次進入此條資料的修改介面：

發現雖然其它文字欄位都進行了相應修改，但是“頭像”部分並沒有修改為我們指定的圖片(如下圖,頭像仍然顯示為一個“叉”的形狀)

查詢資料庫，探索資料庫中的頭像對應的blob欄位中的資料已經更改為指定的圖片。

 

l  問題解決(共兩步)：

（1）修改servlet：在進行資料讀取的servlet中增加圖片隨機數代碼

       //圖片隨機數

       double randomNum = Math.random();

       request.setAttribute("randomNum", randomNum);

（2）更新前台資料修改jsp：圖片顯示img標籤的src中增加“randomNum”參數

<img src="<%=path%>/servlet/customer/personPic?cspId=${cspId}&randomNum=${randomNum}"></img>

 

重新開啟同一人員的資料修改介面——成功顯示剛才更新過的圖片。。

 

 

l   原理：

由於在img的src中增加了隨機數參數，多次訪問圖片時，瀏覽器認為是訪問了不同的圖片路徑(或者說是訪問了不同的圖片），瀏覽器會每次重新訪問伺服器讀取圖片，而不再讀取緩衝中的圖片。

 

 

 

相關參考：

Jsp頁面中關於用戶端圖片緩衝的解決

http://damiao-cn.javaeye.com/blog/371216

 

JSP解決圖片緩衝問題

http://wuaner.javaeye.com/blog/395443