JS:window.showModalDialog实现图片选择

最新推荐文章于 2020-08-05 11:37:39 发布

song_8

最新推荐文章于 2020-08-05 11:37:39 发布

阅读量249

点赞数

文章标签： Bean JavaScript C C# C++ ViewUI

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="选择图片" οnclick="selectmage();"/>
                   
              <input type="button" id="addid" class="button bt_add" οnclick="addnew();" value="<bean:message key="visualcenter.roleconf.button.save" />" />
                  
              <input type="button" id="updateid" class="button bt_add" οnclick="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="#" οnclick="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="#" οnclick="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>

song_8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS:window.showModalDialog实现图片选择

JS:window.showModalDialog实现图片选择首先谈一下需求：web服务器上某目录下放有一些图片，要求把这些图片的名称保存到数据库中，但页面不能显示图片的名称，必须让用户选择图片。思路：先通过action返回信息列表和目录中的图片名称，图片名称用字符串数组保存。由于javascript的模态对话框可以把数组作为参数传递，所以就方便在弹出的对话框中显示图片，...
复制链接

扫一扫