input file样式美化
默认样式:
<input type="file" />

美化样式时:
- 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100%
- 可以用到定位
.box{
position:relative;
width:300px;
height:36px;
}
input[type="file"]{
width:100%;
height:100%;
opacity:0;
position:absolute;
top:0;
left:0;
}

获取上传文件的文件名:
$("input[type='file']").on("change",function(){
var files = $(this).prop("files");
// console.log(files);
var filename = files[0].name; //获取上传的文件名
$(".showName").val(filename);
});

files.length; //上传文件个数,可能是多个
files[0].lastModified //代表文件的修改日期,而非上传日期
files[0].name; //上传文件名
files[0].size; //上传文件大小(单位是b)
files[0].type; //文件类型
input file样式美化的更多相关文章
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- 自定义input file样式
自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...
- input:file样式怎样修改
问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- ie浏览器下HTML上传控件input=file的美化
近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看.今天在网上找到一方法,试过后感觉很好,终于把这个问题给解 ...
- input file样式修改,图片预览删除功能
本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...
- 文件上传input type="file"样式美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- input[type=file] 样式美化,input上传按钮美化
<style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...
- input(file)样式修改及上传文件名显示
实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...
随机推荐
- 通过UIColor转换为UIImage
+ (UIImage *)createImageWithColor:(UIColor *)color { CGRect rect=CGRectMake(0.0f, 0.0f, 1.0f, 1.0f); ...
- MyBatisSystemException->BindingException: Parameter 'xxx' not found. Available parameters are [arg1, arg0, param1, param2]
最近在使用Spring boot+mybatis做新的基础框架,结果碰到如下问题: 1 org.mybatis.spring.MyBatisSystemException: nested except ...
- Django分页的实现
Django分页的实现 Django ORM 分页介绍 分页是网页浏览中常见到的一种形式,在数据量较大时,一个页面显示不全,采取分割数据由用户选择进行显示的方式. 基本实现 技术点 通过切片得到数据 ...
- 洛谷 P4774 / loj 2721 [NOI2018] 屠龙勇士 题解【同余】【exgcd】【CRT】
推导过程存在漏洞+exCRT板子没打熟于是期望得分÷实际得分=∞? 题目描述 小 D 最近在网上发现了一款小游戏.游戏的规则如下: 游戏的目标是按照编号 \(1\sim n\) 顺序杀掉 \(n\ ...
- OpenERP button 的三种类型
1. workflow: 默认是这种类型,如果你需要创建工作流类型的button使用这个 2. object: 调用function的类型,如果你需要调用py文件中同名的方法,使用该类型. 3.act ...
- jenkins配置构建执行状态
运行构建 在项目 左侧列表点击 “立即构建” ,在 “Build History” 列表中,会看到执行状态,蓝色圆点表示构建成功,红色圆点表示构建失败 点击 构建失败的任务(红色的小圆点).然后点击“ ...
- ok6410 android driver(1)
target system : Android (OK6410) host system : Debian Wheezy AMD64 1.Set up android system in ok6410 ...
- js处理小数方法
1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.round(7/2) 4, ...
- 配置Linux本地源镜像
今天看到同事做了一个公司本地的apache镜像源,感觉好叼的样子.然后就自己上网找些资料,尝试自己搭建一套出来.然后就有了这篇博文... 声明:本文中充满了浓浓的技术嫉妒的心理,阅读需谨慎. 本文以 ...
- HDU 1465 不容易系列之一(排错公式)
大家常常感慨,要做好一件事情真的不容易,确实,失败比成功容易多了! 做好“一件”事情尚且不易,若想永远成功而总从不失败,那更是难上加难了,就像花钱总是比挣钱容易的道理一样. 话虽这样说,我还是要告诉 ...