自定义上传控件(兼容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.允许上传文件数量 允许选择多个文件:< ...
随机推荐
- SPA页面初试
之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location ...
- 安装win8/win10提示无法在驱动器0分区上安装windows解决方法
在通过U盘或光盘安装win8/win8.1/win10系统时,不少用户遇到无法安装的问题,提示“无法在驱动器0的分区1上安装windows”,格式化分区1也不能解决,进而提示Windows无法安装到这 ...
- Spring Aop 注解方式参数传递
v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...
- python的Web框架,Django模板变量,过滤器和静态文件引入
HTML模板的路径查找 在setting中设置查找路径: #默认的查找在此处填写,优先级最高,为在manage.py的同级路径中,添加(常规是template)文件夹,在(template)文件夹中配 ...
- JAVA里的VO、BO、PO分别指什么?
VO(value object) 值对象 通常用于业务层之间的数据传递,和PO一样也是仅仅包含数据而已.但应是抽象出的业务对象,可以和表对应,也可以不,这根据业务的需要.个人觉得同DTO(数据传输对象 ...
- 部署---阿里云服务器,linux, ubuntu ,部署django用到的一些命令
部署项目<下课说>APP时,总结出的一些命令和方法细节 Linux.ubuntu.django.uwsgi.nginx.mysql 里面有些是查找的资料,我也不大懂[手动笑哭],这还是部署 ...
- [转]SQL - Create XML - How to set Unicode UTF-8
本文转自:https://stackoverflow.com/questions/44754356/sql-create-xml-how-to-set-unicode-utf-8 I found a ...
- 34.Linux-printk分析、使用__FILE__, __FUNCTION__, __LINE__ 调试
本节学习目的 1)分析printk()函数 2)使用printk()调试驱动 1.在驱动调试中,使用printk(),是最简单,最方便的办法 当uboot的命令行里的“console=tty1”时,表 ...
- MySQL5.7 常用用户操作
目录 MySQL5.7 常用用户操作 1. 新建用户 2. 授权 3. 创建用户时授权 4. 设置与更改用户密码(root) 5. 撤销用户权限 6. 删除用户 7. 查看用户的授权 8. 显示当前用 ...
- 不依赖AIDL的跨进程通信
http://blog.csdn.net/lmj623565791/article/details/38461079 如果知道AIDL和binder的原理,可以简单写一个不依赖AIDL的跨进程通信 不 ...