window.showModalDialog()使用与form表单文件上传以及父子页面传值

window.showModalDialog()简介：

(1)使用方法：
window.showModalDialog(sURL [, vArguments] [,sFeatures])

(2)参数说明

sURL--必选参数，类型：字符串。用来指定对话框要显示的页面的URL。
vArguments--可选参数，类型：变体。用来向子对话框传递参数，传递的参数类型不限，包括数组，对象等。
sFeatures--可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
1.dialogHeight :对话框高度。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
7.resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

使用指南：

1、在父窗口点击上传图片的按钮，然后调用下面的openUploadFileDialog()方法，将fileObj对象传入子页面

父页面a.jsp或者也可以使用（var obj = new Object(); obj.name = document.getElementById("yourId").value）传入

2、然后弹出子页面upload.jsp图片上传页面

3、点击选择图片，上载进行文件上传，通过后端返回值拿到文件上传路径imageurl

4、通过var fieldObj = window.dialogArguments;获取父窗口参数，然后通过fieldObj.val(imageurl)将获取的返回值传到父窗口

<td>
<input type="text" name="form.largeImage"  id="largeImage" class="input02" style="width:300px;"   value="<c:out value='${form.largeImage}'/>"/>
<input type="button" onClick="openUploadFileDialog($('#largeImage'))" value="上传文件" 
  class="bt02"/>
</td>

调用openUploadFileDialog()方法，传递对象给子窗口

function openUploadFileDialog(fieldObj)
{
    if(fieldObj)
    {
    	if(fieldObj.attr("tagName") == "INPUT" && fieldObj.attr("type")=="text"){
      
        	
      return window.showModalDialog("upload/upload.jsp",fieldObj,'dialogHeight: 100px; dialogWidth: 350px; dialogLeft:500px; dialogTop:300px; edge: Raised; center: Yes; help: no;scroll:no; resizable: no; status: no;')
        	 
        }
    }
    alert("接收上传文件路径的对象不是一个输入域");
}

子窗口，form表单文件上传，将生成的文件路径传递给父窗口

var fieldObj = window.dialogArguments;获取父窗口参数

，然后通过fieldObj.val(imageurl)将获取的返回值传到父窗口的指定位置

<script language="javascript">
function checkForm()
{
   
	var uploadfile =  $('#uploadfile').val();
	if(uploadfile==null || uploadfile==""){
		 alert("请先选择您需要上传的文件");
         return false;
	}
	
    	submitForm(element);
    }
    
    function submitForm(element){
    	var formData = new FormData(document.getElementById("myform"));
    	$.ajax({
         	url:"/cgi/upload/UploadAction?function=MyUpload",
            data: formData,
     		dataType: "json",
     		type: "post",
     		processData: false,
     	    contentType: false,
     		success: function(data) {
     			if(data.msgcode=='0000'){
     				document.getElementById("uploadDiv").style.display = "none";
     			    document.getElementById("waitDiv").style.display = "block";
     				/* console.log(data.message); */
     				var imageurl = data.message;
     				var fieldObj = window.dialogArguments;
     				if(fieldObj){
     					 fieldObj.val(imageurl);
     		             window.close();
     				}
     					
     				}
     				
     			}else{
     				alert(data.msgcode);
     				return false;
     			}
     		},
     		error:function(XMLHttpRequest, textStatus, errorThrown){
     			alert("系统错误！");
     			console.log(XMLHttpRequest.status);
     			console.log(XMLHttpRequest.readyState);
     			console.log(textStatus);
     		}
         });
    }
}
</script>

<div id="uploadDiv" class="treebox">
    <form style="margin:0px" name="myform" id="myform" action="" target="my" enctype="multipart/form-data" method="post">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td height="10"></td>
            </tr>
            <tr>
                <td align="center"><input type="file" size="30" name="uploadfile" id="uploadfile"  class="input02"/></td>
            </tr>
            <tr>
                <td height="10"></td>
            </tr>
            <tr>
                <td align="center"> <input type="submit" name="button" onclick="checkForm();" id="button" value="上  载" class="bt01"/>
                    <input type="button" onClick="window.close();" value="关  闭" class="bt01"/>
                    <iframe frameborder="0" width="0" height="0" name="my"></iframe>
                    </td>
            </tr>
        </table>
    </form>
</div>


<div id="waitDiv" style="display:none">
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center">正在上传，请等待......</td>
        </tr>
    </table>
</div>

不熟悉window.showModalDialog的小伙伴这里推荐给大家一个window.showModalDialog()用法详解

https://blog.csdn.net/bobwu/article/details/7474703

注意：window.showModalDialog是用在低版本的浏览器，高版本的浏览器只用window.open()。

大家可以看我的另一篇博文window.open()：https://blog.csdn.net/qq_36826248/article/details/82887422

window.showModalDialog()使用与form表单文件上传以及父子页面传值

猜你喜欢