标签：showmodaldialog 子窗口 弹框 javascript 弹出子窗口
场景:
我要做一个图片上传,上传成功后,弹出一个页面,填写其他信息.
上传图片的界面:
选择文件之后,点击[上传]按钮,
选择确定之后,图片上传到服务器,同时服务器会返回json字符串,其中有图片路径,此时使用window.showModalDialog,弹出一个网页,网页中要获取图片地址,用于显示图片
父页面关键代码:
var options = {
url: "<%=path%>/upload/upload",
type: "POST",
dataType:‘json‘,
success:function(json) {
// alert(json.fileName);
var obj22 = new Object();
obj22.picPath=json.fileName;
$(‘#picForm‘).resetForm();
window.showModalDialog("<%=path%>/patientPic/add",obj22,"dialogWidth=600px;dialogHeight=640px;help=no");
},
error:function(er){
//functionChange(er.responseText);
}
};
$(‘#picForm‘).ajaxSubmit(options); 其中obj22 是用于把父窗口的值传递给子窗口的.
子窗口代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传图片</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/static/css/index.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/static/css/global.css">
<script type="text/javascript" src=\‘#\‘" /static/js/jquery-1.10.1.js"></script>
<script type="text/javascript" src=\‘#\‘" /static/js/jquery.form.js"></script>
<script type="text/javascript" src=\‘#\‘" /static/js/common_util.js"></script>
<script type="text/javascript">
window.onload=function(){
var patientPicId=com.whuang.hsj.$$id(‘patientPicId‘);
var obj = window.dialogArguments;
patientPicId.src=\‘#\‘" /upload/image/‘+obj.picPath;
// alert(patientPicId.src);
var picPath=com.whuang.hsj.$$one(‘picPath‘);
picPath.value=obj.picPath;
}
var ajaxSubmit22=function(){
var patientObj=com.whuang.hsj.$$one("patient");
if(!com.whuang.hsj.checkNullValue(patientObj,‘errorSpanId‘,‘请填写姓名.‘)){
return ;
}
var hospitalObj=com.whuang.hsj.$$one("hospital");
if(!com.whuang.hsj.checkNullValue(hospitalObj,‘errorSpanId‘,‘请填写医院/门诊.‘)){
return ;
}
var doctorObj=com.whuang.hsj.$$one("doctor");
if(!com.whuang.hsj.checkNullValue(doctorObj,‘errorSpanId‘,‘请填写医生姓名.‘)){
return ;
}
var options = {
url: "<%=path%>/patientPic/ajaxSave",
type: "POST",
dataType:‘json‘,
success:function(json) {
var closeWin22=function(){
$(‘#patientPicForm‘).resetForm();
window.close();
};
setTimeout(closeWin22,3000);
alert("上传成功!");
closeWin22();
},
error:function(er){
//functionChange(er.responseText);
alert(er);
}
};
$(‘#patientPicForm‘).ajaxSubmit(options);
}
</script>
</head>
<body style="background-color:#93D6EF" >
<center>
<h2>图片上传</h2>
<div id="errorSpanId" > </div>
<form id="patientPicForm" method="POST" >
<table class="frontPatientPicTable" >
<tr><td class="frontPatientPicTd" >姓名<font color="red">*</font> </td><td> <input class="frontPatientPicInput" name="patient" type="text" > </td></tr>
<tr><td class="frontPatientPicTd">医院/门诊<font color="red">*</font></td><td> <input class="frontPatientPicInput" name="hospital" type="text" > </td></tr>
<tr><td class="frontPatientPicTd">医生<font color="red">*</font></td><td> <input class="frontPatientPicInput" name="doctor" type="text" > </td></tr>
<tr><td class="frontPatientPicTd">说明</td><td> <input class="frontPatientPicInput" name="desc" type="text" > </td></tr>
<tr><td colspan="2" > <img id="patientPicId" > </td></tr>
<tr><td colspan="2" align="center" > <input class="frontPatientPicInput" type="button" onclick="ajaxSubmit22()" value="提交" > </td></tr>
</table>
<input type="hidden" name="picPath" >
</form>
</center>
</body>
</html>子窗口通过
window.dialogArguments
获取父窗口传递的值,界面如下:
上述图片就是根据父窗口传过来的图片路径来显示的.
本文出自 “whuang” 博客，请务必保留此出处http://huangkunlun520.blog.51cto.com/2562772/1562418
标签：showmodaldialog 子窗口 弹框 javascript 弹出子窗口
原文地址：http://huangkunlun520.blog.51cto.com/2562772/1562418
