关闭模态对话框，刷新父窗口，异步上传文件

最近做一个项目，excel导入数据，有一个同事使用模态对话框，上传并返回提示，如果正确上传文件，给提示，关闭模态对话框，刷新父窗口的列表。

 

1.打开一个模态对话框：

function openWindow(innerWidth,innerHeight)
{
window.showModalDialog("${pageContext.request.contextPath}/excelupLoad.js",window,
 'dialogWidth:' + innerWidth +'px;dialogHeight:'+ innerHeight+'px;');
}

 

2.一般情况下给了提示后就可以用下面这个来关闭窗口，刷新父窗口：

//刷新打开窗口的上一个窗口
this.opener.location.reload();
//关闭窗口
window.close();

 可就是不能刷新窗口，上下顺序换了还是不行;

 

3. 最后到网上搜了搜：

关闭模态对话框，刷新父窗口 。
showModalDialog   does   not   have   an   opener   (since   it   is   to   be   used   as   a   glorified   alert/confirm/prompt   so
模态对话框，没有opener，不能用window.opener.location.reload();或window.parent.location.reload();
要通过返回值来判断关闭后刷新 。

function   openWindow(url,   xsize,   ysize)
{
  res   =   showModalDialog(url, " ", "dialogWidth: "+xsize+ ";dialogHeight: "+ysize+ ";status=no;help:no;center:yes ")  
    if   (res== 'ok ')   window.location.reload(1)
}

and   in   the   dialog   use
<td   onclick= "window.returnValue= 'ok ';window.close();   "> Close </td> 

 

4. 上传文件由于要给一个上传是否成功的提示，因为我们用的是struts2框架，只能通过跳转页面来给提示，由于在模态对话框中，如果再提交页面的话，用户体验就太不好了，因此要选择异步提交，那怎样异步上传文件呢？

从网上找到了一个异步上传文件的插件：ajaxfileupload.js

 $.ajaxFileUpload(
                   {
		                url:'${pageContext.request.contextPath}/${param.url}.action',            //需要链接到服务器地址
		                secureuri:false,
		                fileElementId:'upLoadFile',                        //文件选择框的id属性
		                dataType: 'json',                                     //服务器返回的格式，可以是json
		                success: function (data, status)            //相当于java中try语句块的用法
		                {      
			                if(data.success==true)
			                {
			                    alert('上传成功！');
			                    window.returnValue='ok';//返回值
				  	    window.close(); //关闭窗口
				         }
				  	else if(data.success ==false){		
						  alert('上传失败！');
			                }
		                },
		                error: function(){
					//alert("error");
			         },
			         complete:function(XMLHttpRequest, textStatus){
			               //alert("complete");
			        }
                     }

 

5. form

<form action="${pageContext.request.contextPath}/uploadFile.action"					
method="post" enctype="multipart/form-data" target="_self">
<input type="file"  name="upLoadFile" id="upLoadFile"  />
<input type="button" value="上传" onclick="ajaxFileUpload()" />
</form>