js文件上传ie报错(jquery+Iframe)

最新推荐文章于 2021-07-05 10:55:26 发布

原创最新推荐文章于 2021-07-05 10:55:26 发布 · 301 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js文件上传 #IE不兼容 #拒绝访问 #iframe #脚本错误

java 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了解决IE浏览器中图片上传时遇到的兼容性问题。通过两种方案实现无刷新上传并隐藏file按钮，利用a标签触发上传，确保跨浏览器兼容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在最近工作中需要图片上传功能，前提条件：

1、上传过程中页面不刷新。

2、上传页面中不使用file按钮(隐藏file按钮)，用a标签来隐式调用file按钮。

于是想到基于Iframe做了一个图片上传，在JS中调用$("#uploadFile").submit()时出无法在IE浏览器下兼容容，无法正常上传提示"拒绝访问"脚本错误(在Chrome、FireFox下正常)。

详情可参阅：http://blog.youkuaiyun.com/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" onchange="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" onchange="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浏览器兼容问题，一直没有想明白，还望知情人士能分享下原理，不胜感激！