兼容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 ...
随机推荐
- IDEA Spring注入显示红色波浪线
- Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- js对象遍历输出顺序错乱的问题
一.js对象遍历顺序错乱的原因 下边就来实践一下: var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',hobby:'dsf ...
- code forces 805B (水)
#include<stdio.h>#include<iostream>#include<algorithm>#include<string.h>#inc ...
- QML 从入门到放弃
发现了一个问题: QQuickView only supports loading of root objects that derive from QQuickItem. If your examp ...
- 【转】python模块导入细节
[转]python模块导入细节 python模块导入细节 官方手册:https://docs.python.org/3/tutorial/modules.html 可执行文件和模块 python源代码 ...
- python模块之sniffio
嗅探python用了哪个异步库 from sniffio import current_async_library import trio import asyncio async def print ...
- Centos6.8实现SVN提交后自动更新目录
1.创建svn目录 mkdir /var/www/project 2.从服务器的本地svn上checkout最新版本代码到www目录下的project文件夹,注意本地svn服务器地址和端口号是在启动s ...
- canvas - 简单画板
截图: Demo:Demo 上代码:. <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- luasocket 安装记录 (FS1.6)
说明: 想通过Lua 脚本实现 http.默认 FS 的 mod_lua 中没有对socket 的支持,如下的操作为lua 添加 socket的支持. 一.下载 luasocket 包: # wget ...