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中增加了隨機數參數,多次訪問圖片時,瀏覽器認為是訪問了不同的圖片路徑(或者說是訪問了不同的圖片),瀏覽器會每次重新訪問伺服器讀取圖片,而不再讀取緩衝中的圖片。
總結:若以上方法都無法解決,就通過Java輸出資料流直接寫到前台,類似後台驗證碼的產生。
相關參考:
Jsp頁面中關於用戶端圖片緩衝的解決
http://damiao-cn.javaeye.com/blog/371216
JSP解決圖片緩衝問題
http://wuaner.javaeye.com/blog/395443