兼容IE浏览器样式的html上传文件控件
最近在公司做项目时需要用到html的上传文件控件,但发现原生的上传文件控件<input type="file" />在IE、Chrome浏览器的显示效果相差很大,为了统一样式,我参考了网上的许多方法,下面给出我自己的代码实现(实际上就是在原生的input file上面加个外壳,再添加一些样式,让它看上去不像原生的这么丑)
html部分
<div class="upload-box">
<div class="input">
<input type="file" id="input" size="45"/> <!--原生的file-->
</div>
<div class="upload">
<div class="upload-choose">选择文件</div>
<div class="upload-info"></div>
</div>
</div>
css部分
.upload-box {
position: relative;
} .input {
height: 30px;
position: absolute;
top: 0px;
left: 0px;
} input[type="file"] {
border: 1px solid red;
width: 480px;
opacity:;
} input[type="submit"] {
width: 100px;
height: 30px;
background: #ddd;
border: none;
} .upload-choose {
width: 80px;
height: 30px;
background: #eee;
float: left;
text-align: center;
line-height: 30px;
font-family: "Microsoft YaHei";
font-size: 14px;
font-weight: bold;
} .upload-info {
width: 400px;
border: 1px solid #eee;
height: 28px;
line-height: 28px;
float: left;
padding-left: 5px;
overflow: hidden;
}
js部分
$(function(){
$("#input").change(function(){
var filename_split = $(this).val().split("\\");
var filename = filename_split[filename_split.length - 1];
$(".upload-info").text(filename);
});
});
这样基本上可以实现和原生上传控件相同的效果
兼容IE浏览器样式的html上传文件控件的更多相关文章
- html+css上传文件控件美化
html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jquery上传文件控件Uploadify
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
- jQuery上传文件控件Uploadify使用
Uploadify是JQuery的一个上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件等. 首先应下载jQuery和uploadify插件 jQuery下载地址:h ...
- asp.net 页面上传文件控件后台代码Request.Files获取不到
今天开发中遇到页面文件上传控件选择了文件,而后台Request.Files.Count取值为0,之前开发中遇到过几次,老是忘掉,今天记下来. html: <input type="fi ...
- ASP.NE 上传文件控件
protected void Button1_Click(object sender, EventArgs e) { //if (Request["id"]==null & ...
- 用JS怎么判断上传文件控件是否未选择文件
页面代码: <form name="form1" action="uploadPosdetailFile.html" method="post& ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- 兼容各浏览器的js判断上传文件大小
由于项目需要,在网上找了一个JS判断上传文件大小的程序,经测试兼容IE6-,Firefox10,Opera11.,safari5.,chrome17 <!DOCTYPE html> < ...
- ubuntu 搭建ftp服务器,可以通过浏览器访问,filezilla上传文件等功能
搭建ftp服务器 1:首先,更新软件源,保证源是最新的,这样有利于下面在线通过apt-get install命令安装ftp. 2:使用sudo apt-get install vsftp命令安装vsf ...
随机推荐
- Vue.js简单记录
官网:https://cn.vuejs.org/ https://cn.vuejs.org/v2/api/#methods v-bind 缩写 <!-- 完整语法 --> <a v- ...
- 对象转换为json格式,类似中间层API
<一头扎进SpringMvc视频教程\<一头扎进SpringMvc>第四讲 源码\> 对象自动转换为json格式要在 spring-mvc.xml添加一个东西 ,和对应的命名空 ...
- DeepLearning.ai-Week4-Face Recognition for the Happy House
1 - Task Implement the triplet loss function Use a pretrained model to map face images into 128-dime ...
- CF1139A Even Substrings
题目地址:CF1139A Even Substrings 一个数是偶数等价于其最后一位为偶数(2/4/6/8/0) 从左往右扫一遍,如果一个数是奇数则直接跳过,偶数则加上它对答案的贡献 这里的贡献应该 ...
- SpringCloud概述
⒈官网说明 SpringCloud是基于SpringBoot提供了一套微服务解决方案,包括服务注册与发现.配置中心.全链路监控.服务网关.负载均衡.熔断器等组件,除了基于Netflix的开源组件做高度 ...
- 利用crash 分析软死锁问题【转】
转自:https://blog.csdn.net/divlee130/article/details/47806551 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...
- 获取图片的EXIF信息
对于专业的摄影师来说,Exif信息是很重要的信息,也包含了非常多的东西 1.EXIF EXIF(Exchangeable Image File)是“可交换图像文件”的缩写,当中包含了专门为数码相机的照 ...
- linux学习之硬盘的存储原理和内部架构
原文地址:https://blog.csdn.net/tanggao1314/article/details/52074735 首先,让我们看一下硬盘的发展史: 1956年9月13日,IBM的IBM ...
- 洛谷 P4948 拉格朗日多项式插值(杜老师板子)
https://www.luogu.org/problemnew/show/P4948 这篇博客主要目的是存一下的dls的神奇板子,本来应该是推公式或者二分做的 但是dls的插值板子直接写好了这个特殊 ...
- java interview
gitbook address https://dongchuan.gitbooks.io/java-interview-question/content/java/==_equal.html