自定义上传控件(兼容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.允许上传文件数量 允许选择多个文件:< ...
随机推荐
- Java转义emoji等特殊符号
写在前面 网上找了很多转emoji等方法,大多有两种方法 更改数据库编码格式为utf8mb4 过滤字符串中的emoji 都不是很优雅 更改数据库编码,势必影响其他数据库 过滤emoj效率比较低 处理E ...
- js 之 this的用法
该篇文章混合了比较多文章,由于自己也水平有限,大家就将就着看下吧,详情可以参看<JavaScript语言精粹>,不过文章提供了很多例子,供大家参阅思考. 首先关于this我想说一句话,这句 ...
- POJ 1740(构造博弈)
题目链接: https://cn.vjudge.net/problem/POJ-1740 题目描述: Alice and Bob decide to play a new stone game.At ...
- UVa 442 Matrix Chain Multiplication(栈的应用)
题目链接: https://cn.vjudge.net/problem/UVA-442 /* 问题 输入有括号表示优先级的矩阵链乘式子,计算该式进行的乘法次数之和 解题思路 栈的应用,直接忽视左括号, ...
- Eclipse MAT:浅堆 vs 保留堆
来自:唐尤华 https://dzone.com/articles/eclipse-mat-shallow-heap-retained-heap 有没有想要搞清楚浅堆(Shallow Heap)和保留 ...
- php一些单选、复选框的默认选择方法(示例)
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
- UML,构件图与部署图
一.构件图概述 1.概念 用来显示一组构件之间的组织及其依赖关系 2.基本元素 (1)构件:定义了良好接口的物理实现单元. ● 配置构件:形成可执行文件的基础,如:动态链接库(DLL).ActiveX ...
- RocketMQ 主从同步机制
主从同步(HA 高可用) 主从同步原理: 为了保证系统的高可用,消息到达主服务器后,需要将消息同步到从服务器.如果主服务器宕机,消费者可用从从服务器拉取消息. 大体步骤: 1.主服务器启动,监听从服务 ...
- Java的接口和抽象类
对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的时候会以为它们可以随意互换使用, ...
- npm包管理工具在一般项目中的应用方法
最近自己在有时间,在通学一些知识点,记录一下,以便以后使用方面 当我们在做项目的时候,如果需要到包管理工具,那么我们一定会经历以下流程: 1.首先在官网下载node.js,然后默认安装到C盘 检查是否 ...