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元素.样式和功能都具备 ...
随机推荐
- ansible api2.0 多进程执行不同的playbook
自动化运维工具:ansible 多进程调用ansible api的应用场景: 应用系统检查 一个应用系统可能具有20—50台服务器的集群,初步的系统层面检查可以用一个统一的playbook来检查, ...
- iOS 基础之NSArray数组去重
1.面试题 现在有一个数组arr1,它里面存储的字符串分别为@“zhangsan”@“lisi”@“wangwu”@“lisi”@“zhangsan”,请将它去重后赋值给可变数组arr2输出为:@“z ...
- 隔离python 运行环境和Pycharm 设置代码同步
隔离python 运行环境 查看当前有哪些虚拟环境:workon 进入虚拟环境:workon django 退出虚拟环境:deactivate 创建虚拟环境: mkvirtualenv -p /usr ...
- web站点启用https (二)
接上篇内容 二.实际配置案例 实验案例:为web站点启用https 实验环境:seven公司有一个web站点,域名为www.seven.com,启用的身份验证方式是基本验证方式.随着业务发展想成为网上 ...
- 小M的作物 最小割最大流
题目描述 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子有1个(就是可以种一棵作物)(用1...n编号). 现在,第i种作物种植在A中种植可 ...
- 并发编程>>概念准备(一)
工于其善,必先利器 1.并发和并行的区别 并行:同一时间点执行多个任务(CPU多核或多个CPU同时执行多个任务) 并发:同一时间段内行多个任务(单核同时执行多个任务) 2.同步和异步的区别 同步:执行 ...
- Maven自动FTP远程部署
参照官网文档: https://maven.apache.org/plugins/maven-deploy-plugin/examples/deploy-ftp.html 1.在pom.xml中加入: ...
- springcloud(四)-Eureka Server集群
Eureka Server的高可用 这一节我们接着上一节说. 有分布式应用开发经验的朋友应该发现,前文编写的单节点Eureka Server并不适合线上生产环境.Eureka Client会定时连接E ...
- win10 下springcloud打包docker镜像部署。
1:建一个最简单的springcloud应用. 2:在根目录下新建dockerfile,文件如下: FROM openjdk:8-jdk-alpine VOLUME /tmp ARG JAR_FILE ...
- Mac 10.12安装网站圆形设计工具Axure RP Pro 7
下载: (链接: https://pan.baidu.com/s/1hsaTafi 密码: 855y)