`
song_8
  • 浏览: 4115 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

JS:window.showModalDialog实现图片选择

BeanJavaScriptCC#C++ 
阅读更多

 

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" />&nbsp;<bean:message key="seatmanager.table.text.seatmanager" />&nbsp;&gt;&nbsp;<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" />&nbsp;&nbsp;
            <bean:message key="visualcenter.roleconf.text.oper.opertype" />
              <input type="text" id="opedescid" name="opedesc" value="" class="input_box w_120" />&nbsp;&nbsp;
              图片名称&nbsp;&nbsp;
               <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();"/>
               &nbsp;&nbsp;&nbsp;&nbsp;
              <input type="button" id="addid" class="button bt_add" onclick="addnew();" value="<bean:message key="visualcenter.roleconf.button.save" />" />
              &nbsp;&nbsp;&nbsp;&nbsp;
              <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>

分享到：
| NetBeans有动态发布java代码的功能吗？
评论
2 楼 lixianyi08 2008-12-12  
回帖是一种美德
感谢楼主 我先学习学习
1 楼 iceman0012 2008-08-19  
我看着累，你贴着也累
打包分享下载多好啊！
呵呵
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    window.showModalDialog模式对话框和 window.open的区别

    这些文件可能用于实现用户管理或人员选择等功能，与`window.showModalDialog`和`window.open`的使用直接关联不大，但在实际Web应用中，这些JSP文件可能会用到这两种弹窗方法来创建用户交互界面。例如，`member-admin...

    google不支持window.showModalDialog问题解决方案

    This is a `window.showModalDialog()` shim using a modal HTML5 `&lt;dialog&gt;` element and ECMAScript 6 Generators. It was tested in the latest Google Chrome with the *Enable Experimental JavaScript* flag ...

    window.showModalDialog以及window.open用法简介

    Window.showModalDialog 和 Window.open 都是 JavaScript 中的方法，用于创建新窗口或对话框，下面分别介绍它们的用法和参数。 一、Window.open() 方法 Window.open() 方法用于打开一个新的浏览器窗口，可以指定新...

    JS 弹出对话框window.showModalDialog（）

    ### JS弹出对话框 `window.showModalDialog()` 的使用与详解 #### 一、`window.showModalDialog()` 概述 在JavaScript中，`window.showModalDialog()` 是一个非标准但广泛使用的API，用于创建模态对话框。模态...

    Window.ShowModalDialog使用手册

    在JavaScript编程语言中，`Window.showModalDialog()`方法是一个非常重要的功能，主要用于打开一个模态对话框，即用户必须关闭对话框才能与父窗口进行交互。这个方法在创建用户交互和自定义弹出窗口场景中非常有用。...

    针对window.showmodaldialog弹出窗体无刷新的详细使用

    在网页开发中，`window.showModalDialog` 是一个古老的 API，用于创建模态对话框，它可以在不刷新页面的情况下与用户交互。这个方法在现代Web开发中已经逐渐被`&lt;dialog&gt;`元素或JavaScript库如jQuery UI、Bootstrap ...

    解决window.showModalDialog跨域返回值

    在JavaScript中，`window.showModalDialog`是一个古老但仍然有用的函数，用于打开一个模态对话框，用户在对话框中进行交互，直到关闭对话框为止。然而，当涉及到跨域时，`showModalDialog`面临一个问题：它无法正确...

    window.showModalDialog方法的使用

    在JavaScript编程中，`window.showModalDialog`是一个用于打开模态对话框的函数，它能够创建一个新的浏览器窗口或者在当前窗口内显示一个弹出层，阻止用户与父窗口的交互，直到用户关闭对话框为止。这个方法在创建...

    window.showModalDialog(javascript)

    总之，`window.showModalDialog()`是JavaScript中创建模态对话框的一种方法，主要用于提供一种用户交互的方式。然而，由于跨浏览器兼容性和用户体验的考虑，开发者在实际应用中需要谨慎使用，并考虑使用现代Web技术...

    window.showModalDialog的基本用法

    ### window.showModalDialog 的基本用法 `window.showModalDialog` 是一个早期的浏览器功能，主要在 Internet Explorer（IE）4.0 及以上版本中支持。它用于打开一个新的模态对话框窗口，并且该窗口将阻止用户与主...

    关于struts2里用javascript刷新window.showModalDialog的父页面

    ### 关于Struts2中利用JavaScript刷新window.showModalDialog的父页面 在Web开发中，尤其是在使用Struts2框架进行项目开发时，我们经常会遇到需要弹出模态对话框（modal dialog）的需求。其中一个常见的场景就是...

    showModalDialog:window.showModalDialog polyfill 使用元素

    ShowModalDialog 填充这是一个window.showModalDialog() shim，使用模态 HTML5 &lt;dialog&gt;元素和 ECMAScript 2015 Generators 或 ECMAScript 2017 Async/Await。 它在最新的 Google Chrome 和最新的 Mozilla Firefox ...

    JavaScript中window.showModalDialog()用法详解

    总的来说，window.showModalDialog()是JavaScript中一个功能强大的API，可以让开发者方便地创建模态对话框，并且能够很好地管理父子窗口之间的交互。但在使用时，需要注意浏览器兼容性问题，并且要合理利用API提供的...

    window.showModalDialog的一个domo模型

    `window.showModalDialog` 是一个在JavaScript中用于打开模态对话框的函数，它在Web开发中被广泛使用，特别是在创建自定义对话框时。在这个示例中，我们有一个名为"TestWindowDialog"的压缩包文件，其中包含了实现`...

    JS控制弹出页面窗口控件（openWin）

    window.open()和window.showModalDialog()，并解决了showModalDialog()弹出窗口中列表分页的问题。 提供了三个JS方法： （1）showWindow(sURL, width, height); （2）showWindowInPage(pageUrl, params, title, ...

    ShowModalDialog与window.open的区别

    JavaScript 提供了两种常用的方法来创建这类窗口：`ShowModalDialog` 和 `window.open`。这两种方法各有特点，在不同的场景下具有不同的适用性。 #### 二、ShowModalDialog详解 **1. 功能介绍** `ShowModalDialog...

    'window.ShowModalDialog'在Chrome中不起作用

    标题 "window.ShowModalDialog在Chrome中不起作用" 涉及到的是JavaScript中一个特定的浏览器兼容性问题。`window.showModalDialog()` 是一个古老的JavaScript方法，用于在当前页面上打开一个模态对话框，该对话框...

Magicbox
Global site tag (gtag.js) - Google Analytics