在最近工作中需要图片上传功能,前提条件:
1、上传过程中页面不刷新。
2、上传页面中不使用file按钮(隐藏file按钮),用a标签来隐式调用file按钮。
于是想到基于Iframe做了一个图片上传,在JS中调用$("#uploadFile").submit()时出无法在IE浏览器下兼容容,无法正常上传提示"拒绝访问"脚本错误(在Chrome、FireFox下正常)。
详情可参阅:http://blog.csdn.net/jetxt/article/details/12953397
以下为两种解决方案说明:
第一种:
在父级页面中定义Iframe标签src指定到子上传页面或服务端方法。
<iframe id="uploadIframe" frameborder="no" src="..../uploadSum.html" ></iframe>
其中uploadSum.html如下所示:
<style>
.fileClass{
padding: 0 20px;
height: 30px;
margin-left:-93px;
line-height: 30px;
filter:alpha(opacity:0);
z-index:999;
width:48px;
cursor:pointer;
opacity:0;
}
</style>
<form id="uploadFile" method="post" enctype="multipart/form-data">
<a href="javascript:void(0);" id="upload" >上传图片</a>
<input id="picimg" name="picimg" οnchange="uploadPicimg()" class="fileClass" type="file" />
<script type="text/javascript">
function uploadPicimg(){
$("#uploadFile").attr("action","...");
$("#uploadFile").submit();
}
</script>
</form>
在以上代码中是设置了picimg样式,让其覆盖到id=upload的a标签上,当用户点击a标签时,实际隐式的点击了隐藏的file按钮。
说到这里有人就会问了为什么不直接为a标签绑定onclick事件,让其onclick事件直接调用$("#picimg").click(),因为一旦为a标签绑定onclick事件就会出现以上所说的IE不兼容无法上传问题。
这种方式在应用中比较简单常见,这里不多做解释,望谅解!
第二种:
将上传图片a标签与iframe一同定义在父级页面中,移出Iframe不再放在iframe包含的子页面中。其中Iframe标签src指定到子上传页面或服务端方法。
<script type="text/javascript">
//触发Iframe中的file按钮click事件
function doUploadPicImg() {
$("#picimg", $("#uploadIframe")[0].contentWindow.document).click();
}
</script>
<a href="javascript:void(0);" id="upload" onClick="doUploadPicImg()" >上传图片</a>
<iframe id="uploadIframe" frameborder="no" src="..../uploadSum.html" ></iframe>
其中uploadSum.html如下所示:
<form id="uploadFile" method="post" enctype="multipart/form-data">
<input id="picimg" name="picimg" οnchange="uploadPicimg()" style="opacity:0;filter:alpha(opacity:0); " type="file" />
<script type="text/javascript">
function uploadPicimg(){
$("#uploadFile").attr("action","...");
$("#uploadFile").submit();
}
</script>
</form>
将a标签移出Iframe后再调用 onClick进行触发file按钮的click事件,可以兼容IE浏览器,不再提示“拒绝访问”错误脚本提示。
第二种方法具体什么原因解决了IE浏览器兼容问题,一直没有想明白,还望知情人士能分享下原理,不胜感激!