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

问题:

上传文件时,用<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. android背景选择器selector用法汇总

    一.创建xml文件,位置:drawable/xxx.xml,同目录下记得要放相关图片 <?xml version="1.0" encoding="utf-8&quo ...

  2. 20135220谈愈敏Blog8_进程的切换和系统的一般执行过程

    进程的切换和系统的一般执行过程 谈愈敏 原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-100002 ...

  3. SVN中trunk、branches、tags用法详解

    Subversion有一个很标准的目录结构,是这样的.比如项目是proj,svn地址为svn://proj/. 那么标准的svn布局是:svn://proj/|+-trunk+-branches+-t ...

  4. Javascript设计模式之我见:迭代器模式

    大家好!本文介绍迭代器模式及其在Javascript中的应用. 模式介绍 定义 提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示. 类图及说明 Iterator抽象迭代器 抽象迭代器负 ...

  5. 通过爬虫代理IP快速增加博客阅读量——亲测CSDN有效!

    写在前面 题目所说的并不是目的,主要是为了更详细的了解网站的反爬机制,如果真的想要提高博客的阅读量,优质的内容必不可少. 了解网站的反爬机制 一般网站从以下几个方面反爬虫: 1. 通过Headers反 ...

  6. jquery hasClass、removeClass、addClass方法

    hasClass(class) 检查当前的元素是否含有某个特定的类,如果有,则返回true. 参数: class:用于匹配的类名. ---------------------------------- ...

  7. 04.C#类型系统、值类型和引用类型(二章2.2-2.3)

    今天要写的东西都是书中一些概念性的东西,就当抄笔记,以提问对话的方式将其写出来吧,说不定以后面试能有点谈资~~~ Q1.C#1系统类型包含哪三点特性? A1.C#1类型系统是静态的.显式的和安全的. ...

  8. web前端开发教程系列-1 - 前端开发编辑器介绍

    目录: 前言 一. Webstorm 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 二. SublimeText 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 前言 由于很 ...

  9. DOM(五)事件对象

    浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. oP.o ...

  10. Nginx 配置详解

    http://www.cnblogs.com/analyzer/articles/1377684.html 本文转自:http://blog.c1gstudio.com/archives/434 推荐 ...