應用管理模塊開發中選擇應用圖標的功能

最近做了一個應用管理的功能，應用管理中有個應用圖標的功能，對於選擇這個圖標，我使用以下處理方法，比較實用，並且可塑性強。
思路：
1.圖標一般是在項目中的style樣式中，種類比較多，把不同種類的圖標放在不同的文件夾下，該文件夾用於測試，文件夾名稱不合理，請忽略。

2.對於應用管理要上傳圖標，用戶選擇圖標種類，讓圖標在展示的DOM顯示出來，點擊圖標的時候，做一個觸發，將圖標的路徑響應到頁面的隱藏字段中，並將圖標顯示在頁面指定的DOM上。(我在這截了一個開發中的頁面的圖，簡單佈局，不要介意外觀)

在切換頁面應用圖標的時候，中間iframe中就會顯示不同文件夾下的圖標，jsp代碼如下：

<td rowspan="3" height="160px" width="20%">
	應用圖標</td>
<td height="25" rowspan="3"  align="left"  class="contenttdn">
	<!-- 顯示選中圖標的DOM -->
	<img alt="" src="<%=request.getContextPath()%>/${formlist.items[0].yytb}" width="150px" height="150px" id="imgicon">
</td>
<tr valign="middle">
	<td>
		<label><input name="iconsel" type="radio" id="a_image1" value="image1" onclick="selectIcon('image1')"/>應用圖標1</label><br/>
		<label><input name="iconsel" type="radio" id="a_image2" value="image2" onclick="selectIcon('image2')"/>應用圖標2</label><br/>
		<label><input name="iconsel" type="radio" id="a_image3" value="image3" onclick="selectIcon('image3')"/>應用圖標3</label>
		<!-- 隱藏字段，存入數據庫，圖標的路徑 -->
		<input type="hidden" id="yytb" name="yytb">
		<!-- 圖標文件夾的路徑-->
		<input type="hidden" id="imgurl" name="imgurl">  
		<!-- 圖標名稱 -->
		<input type="hidden" id="imgname" name="imgname">  
		<!-- 圖標的類型 -->
		<input type="hidden" id="imgtype" name="imgtype">  		
		
	</td>
	<td colspan="3" height="50px">
		<div>
			<iframe name="iconframe" id="iconframe" src="" frameborder="0" height="100" width="96%"></iframe>
		</div>
	</td>
</tr>
<script type="text/javascript">
	function selectIcon(flag){
		var url="yygl.action?method=selectIcon&flag="+flag;
		//window.open(url,'選擇圖標','height=350,width=700,toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no,status=no');
		window.open(url,'iconframe');
	}
	function setIconUrl(name,path){
		document.getElementById('imgicon').src=path+"/"+name;
		$('#imgurl').val(path);  //存放圖標文件夾的路徑
		var imgtype = name.substring(name.lastIndexOf("."));
		name = name.substring(0,name.lastIndexOf("."));
		$('#imgname').val(name);  //圖標的名稱
		$('#imgtype').val(imgtype);  //圖標的類型
		$("input[name='yytb']").val(path+"/"+name+imgtype);
	}
</script>

後臺java代碼如下：

private final String ACTIONKEY = "yygljsp";   //jsp存入的文件夾
	private static String ICONPATH="Style/yygl/images"; //定義一個默認圖標的路徑
	/**
	 * 選擇應用圖標
	 * @param req
	 * @param res
	 * @return
	 * @throws Exception
	 */
	public ModelAndView selectIcon(HttpServletRequest req, HttpServletResponse res) throws Exception{
		HashMap resultMap = new HashMap();	
		String iconType = RequestUtil.getParameterStr(req, "iconType", "yyglselectIcon");//默認的選擇圖標時，圖標的展示位置
		String flag = RequestUtil.getParameterStr(req, "flag", "");
		if("image1".equals(flag)){
			ICONPATH = "Style/yygl/images/imagea";  //第一個圖標文件夾的路徑
		}else if ("image2".equals(flag)){
			ICONPATH = "Style/yygl/images/imageb";  //第二個圖標文件夾的路徑
		}else if("image3".equals(flag)){
			ICONPATH = "Style/yygl/images/imagec";  //第三個圖標文件夾的路徑
		}
		List iconList=getImgList(ICONPATH);  //獲取路徑下的圖標列表
		resultMap.put("formlist", iconList);
		resultMap.put("path", ICONPATH);
		resultMap.put("flag", flag);
		return new ModelAndView(this.getUserassignpage(this.ACTIONKEY, iconType),resultMap);
	}
	
	/**
	 * 獲取文件下的圖標列表
	 * @param ICONPATH
	 * @return
	 */
	public List getImgList(String ICONPATH) {
		List iconList = null;
		if (iconList == null || iconList.size() == 0) {
			iconList = new ArrayList<String>();
			String path = this.getClass().getClassLoader().getResource("").getPath();
			File file = new File(path.substring(0, path.length() - 16)
					+ ICONPATH);
			String[] filelist = file.list();
			if (filelist != null) {
				for (int i = 0; i < filelist.length; i++) {
					File readfile = new File(ICONPATH + File.separator + filelist[i]);
					if (!readfile.isDirectory()) {
						if (readfile.getName().toLowerCase().indexOf(".gif") != -1
								|| readfile.getName().toLowerCase().indexOf(".png") != -1
								|| readfile.getName().toLowerCase().indexOf(".jpg") != -1) {
							iconList.add(readfile.getName());
						}
					} else if (readfile.isDirectory()) {// 文件夾
					}
				}
			}
		}
		return iconList;
	}

其中圖標展示的地方是ifram引入的一個過渡jsp

代碼如下：

<body  leftmargin="0" topmargin="0"  style="overflow:scroll;overflow-x:hidden">
<form  action="" method="post" name="form1" id="form1">
<div class="centent">
<table width="98%" border="0" cellpadding="0" cellspacing="0"  style="border: 0px;">
	<c:forEach var="obj" items="${formlist}" varStatus="status">
	<div class="fileDiv" onMouseOver="this.className='fileDivhover'" onMouseOut="this.className='fileDiv'"><img alt="" src="${path}/${obj}"  onclick="select('${obj}');"> </div>
	</c:forEach>
</table>
</div>
</form>
</body>
<script language="javascript">
	function select(iconname){
		try{
			parent.setIconUrl(iconname,'${path}');
		}catch(err){
			window.opener.setIconUrl(iconname,'${path}');
			self.close();
		}
	}
</script>

3.在表單提交保存時，就可以將選中的圖標的路徑，保存到應用名稱的數據表中的一個字段中，方便後期取值，讀取圖標的位置。

4.讀取應用圖標時，只要獲取應用名稱數據中，對應的那條數據的路徑即可，即可顯示應用的圖標。