本来公司的系统是使用的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
写到这里就算完了,中间也查了很多资料,希望对大家有帮助!