自定义上传控件(兼容IE8)
上传控件是
<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)的更多相关文章
- 百度 flash html5自切换 多文件异步上传控件webuploader基本用法
双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...
- jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)
我用到的原材料地址:http://www.cnblogs.com/leejersey/p/3660202.html 修改后: /// <reference path="../../Js ...
- 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)
前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...
- 基于AngularJs的上传控件-angular-file-upload
今天跟大家分享的是一个依赖于angular的上传控件. 前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用 ...
- jquery文件上传控件 Uploadify
(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- Upload无刷新上传控件
Upload无刷新上传控件 最近在做一个web开发项目 ,用到upload上传控件 ,由于c#提供的控件局限性太大 ,所以就自己从国外大牛 手里借鉴一下. 该控件可以判断上传的文件是否已存在 ,减少了 ...
- jquery文件上传控件 Uploadify 可以和ajax交互
http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- jquery文件上传控件 Uploadify(转)
原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...
- [转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...
随机推荐
- sqlplus sys as sysdba
Enter user-name:sys Enter password:password as sysdba --以sys用户登陆的话 必须要加上 as sysdba 子句
- 几种常见算法的Python实现
1.选择排序 选择排序是一种简单直观的排序算法.它的原理是这样:首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的后 ...
- 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素
本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...
- 手把手教你实现自己的abp代码生成器
代码生成器的原理无非就是得到字段相关信息(字段名,字段类型,字段注释等),然后根据模板,其实就是字符串的拼接与替换生成相应代码. 所以第一步我们需要解决如何得到字段的相关信息,有两种方式 通过反射获得 ...
- 常用正则表达式:手机、电话、邮箱、身份证、IP地址、网址、日期等
转载源:http://blog.csdn.net/lun379292733/article/details/8169807 <script type="text/JavaScript& ...
- JS 的map和array集合组合返回JSON字符串
使用map 和array 返回自定义对象的JSON字符串: function getObjectJSON() { var array = new Array(); for (var i = 0; i ...
- HTML初学小技巧
01.让背景图不滚动IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动:〈Body Background="图片文件" bgproperties=&q ...
- 盲刷bios
本帖最后由 evayh 于 2011-12-17 13:09 编辑 先看看是否是insyde的bios,如果是的话,可以救回来 insyde BIOS在损坏时,会自动进入CRISIS MODE试图刷回 ...
- 本地chrome调试服务器node
Node内置了V8引擎提供的 inspector 调试器,可以通过 TCP 协议从外部访问这个调试器,方便对Node程序进行调试.启动调试的标志有: Flag Meaning --inspect En ...
- FI配置步骤清单.枫
1. 说明 本版本的FI模块配置内容非常少,主要应用的是系统默认的配置参数,但能完成基本的总帐.应收.应付操作. 配置内容包含以下几部分: 1. 基本的组织结构定义及分配,以及公司代码的全局性 ...