用javascript指令碼–動態指定img對象的src路徑—jsp-javascript-j2ee–hibernate–struts-2.0

javascript,img,src,jsp,j2ee,hibernate,struts-2.0

環境: eclipse, struts2,hibernate3.0

jsp,j2ee,javascript   [撰寫: drs163@163.com   www.newsoftstudio.com ]

後台服務端struts2的action已經能將一個列表集合返回到jsp頁面. 其中有一個項目是 檔案路徑的字串. 我們需要在實際jsp頁面顯示出來的時候,每行記錄前帶一個 根據檔案類型尾碼判斷得出的小表徵圖.

假設現在已經將 類似 gif.gif ,rar.gif,doc.gif的類型表徵圖儲存到了 images/myfiletype目錄.

jsp頁面是 Mylist.jsp,那麼我們寫 兩個指令碼函數 和一段指令碼代碼即可實現這個功能(當然,通過伺服器段判斷處理也能達到)

第一個指令碼函數: 返回指定url的關於類型的部分字串

function ShowFileTypeImg(strUrl)
{

  // by drs -2007-6-2 根據指定 url 獲得其尾碼 類型
  var pos = strUrl.lastIndexOf(".");
  if (pos<=0)
   {
    return "unknow.gif";
   }
   var lastname = strUrl.substring(pos+1,strUrl.length);  //檔案尾碼名
   return lastname+".gif";
 
}

第二個指令碼函數:

          // 指定 動態img對象的 src
          // img 的 id名稱 根據 當前列表的資源id保證其唯一和不同
          // 在頁面中的img對象後面立即撰寫 <script>getimg(img對象id,url)</>可以完成此功能
          // 從而可以動態指定其 src路徑
          // 調用 ShowFileTypeImg(urlfilename) 函數
          function getimg(imgid,urlfilename){
            var   oImg   =   document.getElementById(imgid); //根據id獲得 img對象
          var   appPath ;
          appPath ="<%=PageContent.getAppPath()%>" ;
                                  
          var mysrc ;
          mysrc =appPath + "/images/myfiletype/"+ ShowFileTypeImg(urlfilename); 

          oImg.src    = mysrc; //設定其src
                                  
          }  

 

一段javascript代碼放到img對象的後頭(緊跟其後,可以不用其 onload事件)

說明: onerror事件指定了當有未知的類型,也就是filetype目錄中沒有該類型對應表徵圖時,一律顯示為指定的表徵圖. 

====id="myfileimg<s:property value="FId"/> ==表示動態產生的img 對象id  <s:..>是struts2.0的屬性標籤,這裡它屬於iterator,並返回id值,從而達到img 的id是唯一的

然後將這個img的id名稱以字串形式傳遞給getimg ,將檔案路徑傳遞也傳遞給getimg()

==========DAIMA ========================

......

...<s:iterator value="MyListitems" status="curRecord">

...

<img  onerror="this.src='<%=PageContent.getAppPath()%>/images/myfiletype/unknow.gif';" border="0" src="a" id="myfileimg<s:property value="RId"/>"  >
        <script type="text/javascript">
          getimg("myfileimg<s:property value="FId"/>","<s:property value="FFileNameUrl"/>")
        </script>

......

...... </s:iterator>

......