在最近工作中需要图片上传功能,前提条件:
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" 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浏览器兼容问题,一直没有想明白,还望知情人士能分享下原理,不胜感激!
相关推荐
PHP多文件上传插件,PHP+jQuery+Ajax多图片上传 效果查看:https://blog.csdn.net/chendongpu/article/details/123545180
ajax+jquery+ashx实现上传文件 简单易用,直接调用
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
实现JQuery+ajax+mock.js模拟注册,判断输入框是否输入正确
手撸简单版前端富文本编辑器。基本原理:由于富文本内容不想收到所在页面或者前端框架的影响,或者说写一个完全单独的纯编辑器,采用原生iframe+js+jquery实现。
框架:html + css + javascript(js) +jquery +jsp + serlvet + java + ssm + mysql 前端:html + css + javascript(js) +jquery +jsp 后端:serlvet + java + ssm + mysql 开发工具:ideaIC-2022.3.2.exe + jdk1.8 +...
框架:html + css + javascript(js) +jquery +jsp + serlvet + java + ssm + mysql 前端:html + css + javascript(js) +jquery +jsp 后端:serlvet + java + ssm + mysql 开发工具:ideaIC-2022.3.2.exe + jdk1.8 +...
PHP+jQuery+Ajax仿淘宝多上传按钮单文件上传
jquery+struts2实现文件上传,没有jar包。下载来只需引入struts2jar就可以了
Jquery+BootStrap+ztree+jqgrid所需js和css文件
Jquery 多文件上传,jquery+flash 多文件上传,界面美观, 很炫的上传组件,支持中文! 本实例经过严格测试,保证能正常使用!网上其他好多实例都不能正常运行。 uploadify是一款容量小、功能强的Js批量上传工具,...
jQuery+ajax实现文件上传功能(显示文件上传进度),供大家参考,具体内容如下 具体实现步骤 1、定义UI结构,引入bootstrap的CSS文件和jQuery文件 2、给上传按钮绑定点击事件 3、验证是否选择了文件 4、向FormData...
jquery+SWFUpload+COS上传组件的使用 jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件...
定点定时长音乐播放系统,带进度条的文件批量上传(jquery+plupload+jsp+servlet),该系统没有使用数据库,不需要过多的配置就可以使用,在项目中有一个文档,说明该系统的使用方法与注意事项。
jquery+ajax+json 上传文件并解析 jquery+ajax+json 上传文件并解析
javascript+jquery+ajax相关学习资料PPT
HTML5+CSS3+JQuery+Javascript 中文手册文档
js+jquery+CSS教学演示视频 js+jquery+CSS教学演示视频 js+jquery+CSS教学演示视频 js+jquery+CSS教学演示视频 js+jquery+CSS教学演示视频
JavaScript+jQuery+css+html的帮助文档 中文API 每个UI工程师不可或缺的好帮手
jquery+springboot实现文件上传功能 本文实例为大家分享了jquery+springboot实现文件上传功能的具体代码,供大家参考,具体内容如下 前端 <!DOCTYPE html> <html lang="zh"> <head> <title></title> ...