当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案。罢了,为了和我一样笨的后来人。

问题:

上传文件时,用<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隐藏不能上传文件解决方法的更多相关文章

  1. input file标签限制上传文件类型

    用 input 的file类型标签上传文件,有时需要限制上传文件类型,添加accept属性可以实现 <input type="file" accept="image ...

  2. input file multiple 批量上传文件

    这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...

  3. html input file标签的上传文件 注意点

    文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxl ...

  4. Loadrunner上传文件解决办法(大文件)

    Loadrunner上传文件解决办法(大文件) 最近再做一个跟海量存储相关的项目测试,需要通过LR模拟用户大量上传和下载文件,请求是Rest或Soap,同时还要模拟多种大小尺寸不一的文件 通常情况下, ...

  5. MUI上传文件的方法

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Linux无权限上传文件解决办法

    无权限上传文件解决办法 1.当前登录的普通用户:user1/password1 2.切换到管理员(user2)用户: sudo su - user2 输入user2用户的密码:password2 或者 ...

  7. 朋友封装的一个ASP.NET上传文件的方法

    朋友做了asp.net开发多年,做了这个,自我感觉封装得还不错!!! 代码如下: #region 上传文件的方法 /// <summary> /// 上传文件方法 /// </sum ...

  8. [Node.js] 使用File API 异步上传文件

    原文地址:http://www.moye.me/2014/11/05/html5-filereader/ 最近在做一个网盘的项目,不出意外的涉及到大文件的上传,那么问题来了:如何实时的显示文件上传的进 ...

  9. Html标签,file方式,上传文件

    恩,如果不记下来,记忆就会模糊掉. 希望自己下次看见这篇博客的时候,会解决掉疑问 ----------------------------------------------------------- ...

随机推荐

  1. Asp.net设计模式笔记之一:理解设计模式

    GOF设计模式著作中的23种设计模式可以分成三组:创建型(Creational),结构型(Structural),行为型(Behavioral).下面来做详细的剖析. 创建型 创建型模式处理对象构造和 ...

  2. matlab绘制二维图形

    常用的二维图形命令: plot:绘制二维图形 loglog:用全对数坐标绘图 semilogx:用半对数坐标(X)绘图 semilogy:用半对数坐标(Y)绘图 fill:绘制二维多边填充图形 pol ...

  3. Java集合---Arrays类源码解析

    一.Arrays.sort()数组排序 Java Arrays中提供了对所有类型的排序.其中主要分为Primitive(8种基本类型)和Object两大类. 基本类型:采用调优的快速排序: 对象类型: ...

  4. Python类库下载

    https://sourceforge.net/projects/pywin32/files/pywin32/ WMI库的安装 下载 http://timgolden.me.uk/python/wmi ...

  5. LeetCode 笔记26 Single Number II

    Given an array of integers, every element appears three times except for one. Find that single one. ...

  6. ios 消息推送流程 转载

    iOS开发:推送通知简述及开发实践热度 1已有 706 次阅读 2013-10-15 09:23 |个人分类:经验之谈|系统分类:ios| IOS, 推送一.关于推送通知 推送通知,也被叫做远程通知, ...

  7. HDU3923-Invoker-polya n次二面体

    polya定理.等价类的个数等于∑颜色数^置换的轮换个数 不可翻转的串当中.直接计算∑m^(gcd(n,i)) ,这里gcd(n,i)就是第i个置换的轮换数. 翻转的情况再分n奇偶讨论. n次二面体都 ...

  8. 20145215《Java程序设计》第8周学习总结

    20145215<Java程序设计>第八周学习总结 教材学习内容总结 NIO与NIO2 认识NIO NIO使用频道(Channel)来衔接数据节点,在处理数据时,NIO可以设定缓冲区(Bu ...

  9. CUDA编程学习(二)

    将数据加载到GPU后,如何在grid下的block进行并行计算(一个grid包含多个block) /****How do we run code in parallel on the device** ...

  10. Sublime Text 之 Package Control 镜像

    本文同步自我的个人博客:http://www.52cik.com/2015/11/24/Package-Control.html 这阵子经常有朋友跟我说 Sublime Text 下的 Package ...