IE input file隐藏不能上传文件解决方法
当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案。罢了,为了和我一样笨的后来人。
问题:
上传文件时,用<input type="file" />标签,但是默认的file标签很难看,而且每个浏览器下都有很大差距。
1.一般解决办法:
我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它,比如我们创建一个a标签来替代它,隐藏file标签,单击a标签时触发file标签click弹出选择文件窗口,选择文件之后,触发file的change事件提交。
存在问题:
由于IE浏览器安全限制问题,没有点击file的浏览按钮选择文件都不让上传。
2.终极解决办法:
既然IE非得要亲自点击,我们可以变通一下,让自定义按钮存在又能真正点击到file标签。
解决方案是让file标签盖在a标签上,但file是透明的,这样用户看到的是a标签的外观,实际点击是file标签。
代码如下
<a style="position:relative;" href="javascript:void(0);">
上传文件
<input style="position:absolute;left:0;top:0;z-index:999;opacity:0;"type="file" name="file" />
</a>
注意:
a.取消a标签onclick事件,因为实际上已经不需要a标签的onclick触发file的click了,而是直接就点击到file;
b.file标签不需要再设置display:none隐藏,而是通过opacity:0让它完全透明,实际它是浮在a标签之上
c.file标签设置position:absolute后要给left:0、top:0,否则file标签不会吻合覆盖a标签导致点击按钮的时候点不到file标签
参考原文:http://www.qttc.net/201305334.html(感谢原文作者的分享)
IE input file隐藏不能上传文件解决方法的更多相关文章
- input file标签限制上传文件类型
用 input 的file类型标签上传文件,有时需要限制上传文件类型,添加accept属性可以实现 <input type="file" accept="image ...
- input file multiple 批量上传文件
这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...
- html input file标签的上传文件 注意点
文件上传框 代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxl ...
- Loadrunner上传文件解决办法(大文件)
Loadrunner上传文件解决办法(大文件) 最近再做一个跟海量存储相关的项目测试,需要通过LR模拟用户大量上传和下载文件,请求是Rest或Soap,同时还要模拟多种大小尺寸不一的文件 通常情况下, ...
- MUI上传文件的方法
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- Linux无权限上传文件解决办法
无权限上传文件解决办法 1.当前登录的普通用户:user1/password1 2.切换到管理员(user2)用户: sudo su - user2 输入user2用户的密码:password2 或者 ...
- 朋友封装的一个ASP.NET上传文件的方法
朋友做了asp.net开发多年,做了这个,自我感觉封装得还不错!!! 代码如下: #region 上传文件的方法 /// <summary> /// 上传文件方法 /// </sum ...
- [Node.js] 使用File API 异步上传文件
原文地址:http://www.moye.me/2014/11/05/html5-filereader/ 最近在做一个网盘的项目,不出意外的涉及到大文件的上传,那么问题来了:如何实时的显示文件上传的进 ...
- Html标签,file方式,上传文件
恩,如果不记下来,记忆就会模糊掉. 希望自己下次看见这篇博客的时候,会解决掉疑问 ----------------------------------------------------------- ...
随机推荐
- sqlalchemy 的 Core 方式使用示例
知乎: sqlalchemy 的 Core 方式操作数据是一种怎样的体验? 答: 爽! 本文基于:win 10 + python 3.4 + sqlalchemy 1.0.13 基本步骤如下: 1. ...
- GEOS库的学习之一:介绍和编译
对GEOS库的学习,源于一个项目:要在c++中判断二维平面中两个多边形的关系(无论凹凸).也就是判断两个多边形是否相交.相容等.听起来很简单,可实现起来却比较难,而项目又催得紧.于是我去搜索了一下,看 ...
- [CareerCup] 3.5 Implement Queue using Two Stacks 使用两个栈来实现队列
3.5 Implement a MyQueue class which implements a queue using two stacks. LeetCode上的原题,请参见我之前的博客Imple ...
- 用CNTK搞深度学习 (二) 训练基于RNN的自然语言模型 ( language model )
前一篇文章 用 CNTK 搞深度学习 (一) 入门 介绍了用CNTK构建简单前向神经网络的例子.现在假设读者已经懂得了使用CNTK的基本方法.现在我们做一个稍微复杂一点,也是自然语言挖掘中很火 ...
- Scrum敏捷精要
本文抽取Scrum中的一些重要思想和概念,对Scrum敏捷执行的主题流程进行精要的介绍. 一.基本思想 个体和互动 高于 流程和工具 工作的软件 高于 详尽的文档 客户合作 ...
- c#字符串转换为日期,支持任意字符串
文章关键字: c#字符串转换为日期 c#日期转换字符串 字符串转换日期 字符串转换为date 整数转换为字符串 浮点数转换为字符串 字符串转换为时间 将字符串转换为时间 字符转 ...
- 一种仿照Asp.net Mvc思维构建WebSocket服务器的方法
问题场景 Asp.net Mvc提供了DependencyResolver.Routing.Filter. Modelbinder等webForm所没有新概念,提高Web服务编写的便利性,记得很久之前 ...
- [CH#58解题报告]
题目:http://206.contesthunter.org/contest/CH%20Round%20%2358%20-%20OrzCC%E6%9D%AFnoip%E6%A8%A1%E6%8B%9 ...
- AngularJS开发指南16:AngularJS构建大型Web应用详解
AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇 ...
- iOS 使用AFNetworking遇到异常 Request failed: unacceptable content-type: text/html
错误日志是: Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unac ...