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

本来公司的系统是使用的window.showModalDiagram()，后面发现showModalDiagram()很多浏览器都不兼容，比如谷歌，后面百度查了下觉得替换成window.open，兼容性很好，亲测谷歌、火狐、IE、360浏览器均兼容，话不多说，上代码。

父窗口update_catalog.jsp

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

父窗口调用openUploadFileDialog()方法

function openUploadFileDialog(fieldObj)
{
    if(fieldObj)
    {
    	
        if(fieldObj!=null)
        {
      return window.open("upload/upload.jsp? 
         element="+fieldObj,fieldObj,"modal=yes,height=200, width=450, top=250, left=500, , 
         toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, 
           status=no,alwaysRaised=yes,depended=yes");
        	
        }
    }
    alert("接收上传文件路径的对象不是一个输入域");
}

调用方法后弹出一个子页面upload.jsp

文件上传界面，点击上载按钮进行图片上传，图片上传完后，拿到/cgi/upload/UploadAction?function=MyUpload路径返回的

图片保存路径imageurl，将imageurl路径使用window.opener.document.getElementById(element).value=imageurl传至父窗口

update_catalog.jsp的#smallImage输入框，然后window.close()关闭子窗口

<body>

<script language="javascript">
function checkForm()
{
   
	var uploadfile =  $('#uploadfile').val();
	if(uploadfile==null || uploadfile==""){
		 alert("请先选择您需要上传的文件");
         return false;
	}
	
    	var afterUrl =  window.location.search.substring(1);
    	var index = afterUrl.indexOf("=")+1;
    	var element = afterUrl.substring(index);
    	console.log(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;
     				
     				window.opener.document.getElementById(element).value=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>
</body>

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

https://blog.csdn.net/kaikai4/article/details/73411799

写到这里就算完了，中间也查了很多资料，希望对大家有帮助！

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

猜你喜欢