JS:window.showModalDialog实现图片选择
首先谈一下需求：
web服务器上某目录下放有一些图片，要求把这些图片的名称保存到数据库中，但页面不能显示图片的名称，必须让用户选择图片。
思路：
先
通过action返回信息列表和目录中的图片名称，图片名称用字符串数组保存。由于javascript的模态对话框可以把数组作为参数传递，所以就方便
在弹出的对话框中显示图片，且图片分为5列显示。当点击图片的时候，把图片的名称传回，用模态对话框的另外一个很好的好处是能在关闭窗口时得到窗口的返回
参数。具体一点就是当我们在父窗口调用var rtnobr =
window.showModalDialog()方法后，这个rtnobr就是关闭窗口时返回的窗口，且这时可以用这个参数继续在处理父页面中其他表
单。
下面是我页面的代码：
父页面：
<%@ page contentType="text/html; charset=gb2312" %>
<%@ page import="com.zte.ngcc.web.po.CcVirtualcenter,java.util.List" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><bean:message key="label.visualcenter.role"/></title>
<link href="<c:url value="/skin/css/main.css" />" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<c:url value="/dwr/engine.js" />"></script>
<script type="text/javascript" src="<c:out
value="${pageContext.request.contextPath }"
/>/dwr/interface/CheckRepeat.js"></script>
<script language="JavaScript" src="<c:url value="/js/jquery.js" />"></script>
<script language="javascript" src="<c:url value="/js/toggleGroup.js" />"></script>
<%
CcVirtualcenter vc = (CcVirtualcenter) request.getSession().getAttribute("CURRENT_VC");
int vcid = vc.getVcid().intValue();
List ls = (List)request.getAttribute("filelist");
String[] mapname = (String[])ls.toArray();
%>
<script type="text/javascript">
$(document).ready(function() {
$("#updateid")[0].disabled=true;
});
function addnew(){
var v_opedesc = $("#opedescid").val();
if(check(<%=vcid%>,v_opedesc)){
$("#formid")[0].action="addOpertype.do";
$("#typeid").val("1");
$("#formid")[0].submit();
}
}
function update(){
var v_opedesc = $("#opedescid").val();
var v_oldopedesc = $("#oldopedescid").val();
if(v_opedesc != v_oldopedesc){
if(check(<%=vcid%>,v_opedesc)){
$("#formid")[0].action="updateOpertype.do";
$("#formid")[0].submit();
}
} else {
$("#formid")[0].action="updateOpertype.do";
$("#formid")[0].submit();
}
}
function edit(id,desc,operkind,mapname){
$("#addid")[0].disabled=true;
$("#updateid")[0].disabled=false;
$("#opedescid").val(desc);
$("#idid").val(id);
$("#oldopedescid").val(desc);
$("#operkindid").val(operkind);
$("#operkindid")[0].readOnly=true;
$("#mapnameid").attr("src",mapname);
}
function del(id){
$("#idid").val(id);
$("#formid")[0].action="delOpertype.do";
$("#formid")[0].submit();
}
function selectmage(){
var mapnamearry = new Array(<%=mapname.length%>);
<%
for(int i=0;i<mapname.length;i++){
%>
mapnamearry[<%=i%>]= "<%=mapname[i]%>";
<%
}
%>
var rtnobr = window.showModalDialog("opertype/selectimage.jsp",mapnamearry,"dialogWidth:600px;dialogHeight:500px");
if(rtnobr){
var context="<%=request.getContextPath()%>";
$("#mapnameid").attr("src",context+"/mapfile/"+rtnobr);
$("#mapnameidid").val(rtnobr);
}
}
function check(vcid,opedesc){
var exits;
if(opedesc==""){
alert("座席类型不能为空！");
return false;
} else {
DWREngine.setAsync(false);
CheckRepeat.checkopertypedes(vcid,opedesc,function(data) {
exits = data;
});
if(exits==true){
alert("同一虚拟中心下，座席类型不能重复！");
$("#opedescid")[0].focus();
return false;
}
}
return true;
}
</script>
</head>
<body>
<div id="top"><bean:message
key="visualcenter.roleconf.text.currentposition"
/> <bean:message
key="seatmanager.table.text.seatmanager"
/> > <bean:message
key="visualcenter.roleconf.text.opertype" /></div>
<form name="form1" id="formid" method="post" action="listOpertype.do">
<input name="curPage" id="curPage" type="hidden" />
<input name="type" id="typeid" type="hidden" />
<input name="id" id="idid" type="hidden" />
<input name="oldopedesc" id="oldopedescid" type="hidden" />
<input name="operkind_h" id="operkindid_h" type="hidden" />
<input name="mapname" id="mapnameidid" type="hidden" />
<div class="c_table">
<div class="c_title">
<div class="c_name"><bean:message key="visualcenter.roleconf.text.opertype" /></div>
</div>
<div class="c_content">
<ul>
<li>
座席类型ID
<input type="text" id="operkindid" name="operkind" value="" class="input_box w_120" />
<bean:message key="visualcenter.roleconf.text.oper.opertype" />
<input type="text" id="opedescid" name="opedesc" value="" class="input_box w_120" />
图片名称
<div id="selectimage">
<input type="image" src="<c:url value="/mapfile/1.gif" />" id="mapnameid" name="mapnameimage"/>
</div>
<input type="button" id="selectimageid" class="button bt_search" value="选择图片" onclick="selectmage();"/>
<input type="button" id="addid" class="button bt_add"
onclick="addnew();" value="<bean:message
key="visualcenter.roleconf.button.save" />" />
<input type="button" id="updateid" class="button bt_add"
onclick="update();" value="<bean:message
key="vurvial.center.add.update"/>" />
</li>
</ul>
<div class="c_groups">
<table cellpadding="0" cellspacing="0" class="outerContainer">
<tr><td>
<table class="tdata w_8">
<thead>
<tr>
<th>座席类型ID</th>
<th><bean:message key="visualcenter.roleconf.text.oper.opertype"/></th>
<th><bean:message key="visual.class.mapname"/></th>
<th><bean:message key="visualcenter.roleconf.text.action" /></th>
</tr>
</thead>
</td></tr>
</table>
</td>
</tr>
<tr><td>
<div class="bodyContainer">
<table class="tdata w_8">
<tbody>
<c:forEach items="${data.data}" var="v">
<tr>
<td><c:out value="${v.operkind}" /></td>
<td><c:out value="${v.opedesc}" /></td>
<td><input type="image"
src="<%=request.getContextPath()%>/mapfile/<c:out
value='${v.mapname}'/>"/></td>
<td class="tcenter">
<a href="#" onclick="edit('<c:out value="${v.id}"
/>','<c:out value="${v.opedesc}" />','<c:out
value="${v.operkind}"
/>','<%=request.getContextPath()%>/mapfile/<c:out
value="${v.mapname}" />')"
><bean:message key="visualcenter.roleconf.href.modify" /></a>
<a href="#" onclick="del('<c:out value="${v.id}" />')"
><bean:message key="visualcenter.roleconf.href.delete" /></a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</td></tr>
<tr><td>
<table class="tdata w_8">
<tfoot>
<tr>
<td >
<jsp:include flush="true" page="/common/rowpage.jsp"></jsp:include>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tcenter">
<font color="#FF0000"><c:out value="${infoMsg}" /></font>
</div>
</form>
</body>
</html>
子页面：
<%@ page contentType="text/html; charset=gb2312" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>selectimage</title>
<link href="<c:url value="/skin/css/main.css" />" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="<c:url value="/js/jquery.js" />"></script>
<script language="javascript" src="<c:url value="/js/toggleGroup.js" />"></script>
<script type="text/javascript">
$(document).ready(function() {
var maparray = window.dialogArguments;
var v_imageid = $("#imageid");
var length = maparray.length;
if(length == 0){
alert("请上传图片！");
}
//下面创建一个每行5列显示图片
var vhtml = "";
for(var i=0;i<length;i++){
var context="<%=request.getContextPath()%>";
var vsrc=context+"/mapfile/"+maparray[i];
var tdHtml = "<td><input type='image' imgname='" + maparray[i] + "' src='" +
vsrc + "'/></td>";
if(i == 0 || i%5 == 0){
vhtml += "<tr>";
vhtml += tdHtml;
}else{
vhtml += tdHtml;
if((i + 1)%5 == 0){
vhtml += "</tr>";
}
}
}
vhtml += "</tr>";
$("#imageid").append(vhtml);
$("#imageid input[@type='image']").click(function(){
window.returnValue = $(this).attr("imgname");
window.close();
});
});
</script>
</head>
<body>
<table class="tdata w_8">
<tbody id="imageid">
</tbody>
</table>
</body>
</html>
