上传控件是

<input type="file"/>

  而实际开发过程中,都会自定义一个控件,因为这个控件本身难看,而且不同浏览器效果不一样。

  如IE8显示如下:

  谷歌浏览器显示是这样子的:

  所以通常需要自定义。

1、通常的做法就是把上传控件隐藏,即style="display:none;",再添加一个按钮,设置所需样式,然后通过js触发上传控件的事件。

这样子在谷歌、火狐等浏览器是可以的,但是在IE8中就不兼容了,好多事件都触发不到,比如我需要用到上传控件的onchange事件,IE8就触发不到。

2、页面上直接放两个控件,一个上传控件,一个自定义样式的按钮,使这两个控件重叠,然后设置上传控件的透明度为0、z-index为1000,这样子用户看到的是自定义的按钮,实际上点击的就是上传控件,就兼容IE8了。代码如下:

<input type="file" name="11" style="width:67px;position:absolute;display:inline-block;z-index:1000;filter:Alpha(opacity=0);opacity:0;cursor:pointer;height:23px;" />
<input type="button" value="请选择..."/>

  效果如下,不管是谷歌还是IE8,显示全是一样的:

自定义上传控件(兼容IE8)的更多相关文章

  1. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  2. jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)

    我用到的原材料地址:http://www.cnblogs.com/leejersey/p/3660202.html 修改后: /// <reference path="../../Js ...

  3. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

  4. 基于AngularJs的上传控件-angular-file-upload

    今天跟大家分享的是一个依赖于angular的上传控件. 前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用 ...

  5. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  6. Upload无刷新上传控件

    Upload无刷新上传控件 最近在做一个web开发项目 ,用到upload上传控件 ,由于c#提供的控件局限性太大 ,所以就自己从国外大牛 手里借鉴一下. 该控件可以判断上传的文件是否已存在 ,减少了 ...

  7. jquery文件上传控件 Uploadify 可以和ajax交互

    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  8. jquery文件上传控件 Uploadify(转)

    原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...

  9. [转]html5表单上传控件Files API

    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...

随机推荐

  1. Redhat6.8下安装Oracle11gR2

    Step1.配置本地yum源,方便安装依赖包 df -h 补充: df命令查看 linux系统磁盘空间以及使用情况,-h代表方便阅读方式显示  :/dev/sr0为光驱设备名 mkdir cdrom ...

  2. HTTPS知识小结

    HTTPS知识小结 背景1:TCP握手 internet上的两台机器A,B要建立起HTTP连接了,在这之前要先建立TCP连接,情景大概是这样子的: A:你好,我跟你建立一个TCP好吗? B:好啊. A ...

  3. TabControl控件在左侧绘制tabPage页面

    效果图:

  4. js 时间格式与时间戳的相互转换示例代码

    一.时间转换时间戳 function transdate(endTime){ var date=new Date(); date.setFullYear(endTime.substring(0,4)) ...

  5. 2018 Google SEO 需要注意的点

    1.RankBrain 是一种机器学习系统 - 会根据用户的行为进行,对网站排名. 用户在你的网页上停留多久(用户停留时长) 多大比例的用户点击了你的网页(点击率) Note: 之前Google 开发 ...

  6. 【JavaFx教程】第五部分:将数据用 XML 格式存储

    第5部分的主题 持久化数据为XML 使用JavaFX的FileChooser 使用JavaFX的菜单 在用户设置中保存最后打开的文件路径. 现在我们的地址应用程序的数据只保存在内存中.每次我们关闭应用 ...

  7. js中Date 方法

    Date (对象) Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统 ...

  8. Linux常用基本命令( ls, alias)

    ls命令 作用:列举目录文件信息( list directory content ) 格式:ls [option] [file] 1,命令不跟任何选项与目录,表示列举当前目录的文件信息 ghostwu ...

  9. 本地服务器搭建服务:mysql

    话不多少,mysql的优劣不再此讨论. 1.官网地址:https://dev.mysql.com/downloads/mysql/ 下载页面直接  No thanks,just start my do ...

  10. 分布式Session一致性解决方案有哪些?

    1.使用cookie代替session(不安全,不推荐使用) 2.使用数据库存储session(效率低,不推荐使用) 3.使用nginx反向代理ip绑定方法,同一个ip只能在同一台服务器上进行访问(不 ...