IE9/IE10使用隐藏iframe异步上传文件问题的解决方案
来源:互联网 发布:linux pl2303驱动下载 编辑:程序博客网 时间:2024/05/16 07:37
表单上传原理
<form method="post" action="/Test/Upload" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" /> </form>
为form表单添加属性enctype="multipart/form-data"
,选择文件后提交表单即可上传文件。
C#服务器端通过HttpPostedFileBase file
来接收文件。
异步上传原理
表单提交是同步的,会阻塞页面,可以将表单提交到一个iframe中,父页面就不会阻塞了,需要设置form
的target
属性等于iframe的name属性. form[target]=iframe[name]
上传完成后事件
服务器端只是单纯对表单提交的响应,可以返回一段script脚本作为http响应流,执行javascript。
Response.Write('<script>alert();</script>'); //响应一段script脚本
Response.Flush(); //强制清空缓冲区,写入响应流
对于iframe异步上传情形,Response是iframe的响应,
返回的script脚本中,可以使用parent
获取父页面的window
对象。
场景
为了把异步上传封装成插件,需要对选择文件和上传成功事件提供javascript接口,就不得不用javascript来触发表单中file按钮的点击。
$(':file').click();
这样做,会打开选择文件对话框。
然后,调用$('form').submit();
或$(':submit').click();
来提交表单。
问题
在IE9/IE10中,$(':file').click();
这样触发的选择文件操作,不能上传文件。
原因
E9/IE10限制,file按钮必须由用户点击才可以上传,虽然$(':file').click();
可以选择文件,但是提交表单会先清空选取的内容,多次点击才会上传选中的文件。
解决方案
限制file按钮的大小与点击的按钮大小相同width:28px;height:19px;
,并设置绝对定位position:absolute;
,同时透明度设置为opacity:0;
某个按钮点击时,在onmouseover
事件中,把file按钮移动到该按钮上面;
html:
<a id="u1" onmouseover="javascript:infobrain.onUpload(this)">上传</a>'; //按钮 //隐藏form与iframe <div style="visibility: hidden"> <form id="upload-form" action="../actions/uploadDirect" method="post" target="if-upload" accept-charset="utf-8" enctype="multipart/form-data"> <input name="fileName" /> <input id="upload" type="file" name="fileData" accept=".rar,application/pdf" style="width:28px;height:19px;font-size:15px;opacity:0;position: absolute;"/> </form> <iframe id="if-upload" name="if-upload"></iframe> </div>
js
var infobrain = { onUpload : function(_this) { setTimeout(function () { $("#upload").css("visibility","visible"); var left=$(_this).offset().left, top = $(_this).offset().top; $("#upload").css({left:left,top:top}); },200); } }
注意
本方法实现原理是:隐藏上传文件的form
表单与iframe
,当鼠标滑动到上传按钮时,首先获取上传按钮的位置,同时把file
框移到上传字体的上方并设置visibility:visible
,由于设置了其透明度为0,所以可以模拟点击了上传按钮,但实际点击的是file
框,这样就可以解决在IE9/IE10中file按钮必须由用户点击才可以上传的问题;
本文参考了:IE9/IE10使用隐藏iframe异步上传文件问题
由于本篇文章亲测的时候会出现不稳定情况,且设置的长宽均为0的时候进行点击会出现无法选择到file
框,故本人进行了改进,实测在IE9/IE10均可实现;
当然,我这种方法是一种取巧的方式,如果你有更好的方式可以解决这个问题,可以留言,大家一块讨论一下
- IE9/IE10使用隐藏iframe异步上传文件问题的解决方案
- IE9 IE10 无法上传文件 解决方案
- IE9 IE10 使用ajaxFileupload文件上传不兼容问题
- ajaxfileupload.js不支持IE9,IE10的解决方案
- html使用iframe实现伪异步表单,实现无刷新上传文件时遇到的问题
- 使用iframe伪装异步上传文件
- jquery.uploadify.3.2.1 试用在IE9,IE10中 上传文件的按钮会无法点击
- jquery.uploadify.3.2.1 试用在IE9,IE10中 上传文件的按钮会无法点击
- jquery.uploadify.3.2.1 试用在IE9,IE10中 上传文件的按钮会无法点击
- jquery.uploadify.3.2.1 试用在IE9,IE10中 上传文件的按钮会无法点击
- plupload iframe 隐藏 再 显示 ie9下 上传不了
- 利用iframe 异步文件上传
- 使用隐藏iframe实现无刷新上传文件
- Asp.net + js 异步上传文件的例子 - 使用iframe实现
- Asp.net + js 异步上传文件的例子 - 使用iframe实现
- IE9,IE10 JavaScript 枚举属性的一个问题
- ajaxfileupload的兼容IE9、IE10和中文乱码问题
- 使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- test1-addblog
- 诡异的异常Cannot retry request with a non-repeatable request entity
- Android基础--拨打电话两种方式
- 真机调试安卓捕获应用的运行时异常并保存代码
- React创建项目报错Error: EACCES: permission denied, open 'xxx/xxx/.babel.json'
- IE9/IE10使用隐藏iframe异步上传文件问题的解决方案
- ORA-12154: TNS: 无法解析指定的连接标识符
- jQuery:改进导航
- 中国计算机学会CCF推荐国际学术会议和期刊目录-计算机体系结构/并行与分布计算/存储系统
- iReport+mongodb基础并制作简单报表
- datagrid groupview分组新增单选按钮
- Tensorflow学习笔记(二):Deep MNIST for Experts
- java动态代理之自我理解
- 反射修改字段数据