上传控件是

<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. 笨方法学python学习笔记

    创建于:2016-02-29 更新于:03-02 python版本:2.7 %r 用来做 debug 比较好,因为它会显示变量的原始数据(raw data),而其它的符号则是用来向用户展示输出的: 每 ...

  2. es6学习笔记8--Map数据结构

    Map Map结构的目的和基本用法 JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是只能用字符串当作键.这给它的使用带来了很大的限制. var data = {} ...

  3. js 之 this的用法

    该篇文章混合了比较多文章,由于自己也水平有限,大家就将就着看下吧,详情可以参看<JavaScript语言精粹>,不过文章提供了很多例子,供大家参阅思考. 首先关于this我想说一句话,这句 ...

  4. java运行jar包时候加载指定目录的其他jar支持包

    最近发生一个小故障,调试好的项目,发布成jar包后无法找到oracle的驱动,研究了一下解决了.记录一下. 写了一个run.sh脚本 #!/bin/bash cd ~ cd app nohup jav ...

  5. OpenGL学习笔记:Console工程下如何不显示控制台黑窗口只显示Windows窗口

    刚学习OpenGL,绘制图形的时候,如果不进行设置,运行的时候会先出现黑窗口再出现Windows窗口. 其实要去除控制台窗口非常简单,只需要修改工程设置,把子系统改成Windows,程序的入口点改成m ...

  6. c#FTP应用---FileZilla Server

    一.下载Filezilla  Server 官网网址:https://filezilla-project.org FileZilla Server是目前稍有的免费FTP服务器软件,比起Serv-U F ...

  7. sqlserver清除缓存(转载)

    sqlserver清除缓存,记录查询时间   1 2 3 4 5 6 7 8 9 10 11 12 --1. 将当前数据库的全部脏页写入磁盘.“脏页”是已输入缓存区高速缓存且已修改但尚未写入磁盘的数据 ...

  8. Eclipse 各种小图标的含意

  9. [转载] Spring框架——AOP前置、后置、环绕、异常通知

    通知类型: 步骤: 1. 定义接口 2. 编写对象(被代理对象=目标对象) 3. 编写通知(前置通知目标方法调用前调用) 4. 在beans.xml文件配置 4.1 配置 被代理对象=目标对象 4.2 ...

  10. HDU3622(二分+2-SAT)

    Bomb Game Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...