默认样式:

<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样式美化的更多相关文章

  1. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  2. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  3. input:file样式怎样修改

    问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...

  4. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  5. ie浏览器下HTML上传控件input=file的美化

    近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看.今天在网上找到一方法,试过后感觉很好,终于把这个问题给解 ...

  6. input file样式修改,图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  7. 文件上传input type="file"样式美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. input[type=file] 样式美化,input上传按钮美化

    <style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...

  9. input(file)样式修改及上传文件名显示

    实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...

随机推荐

  1. 自适应大邻域搜索代码系列之(1) - 使用ALNS代码框架求解TSP问题

    前言 上次出了邻域搜索的各种概念科普,尤其是LNS和ALNS的具体过程更是描述得一清二楚.不知道你萌都懂了吗?小编相信大家早就get到啦.不过有个别不愿意透露姓名的热心网友表示上次没有代码,遂不过瘾啊 ...

  2. 3.3.1 Validations

    摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...

  3. JMeter知识点整理

  4. 通过js获取内网ip和外网ip的简单方法 ...

    今天遇到了一个需求,需要获取用户当前的内网ip, 找了半天终于找到了方法,遂将找到的方法记录下来,留给需要的人. 1,获取内网ip function getIP(callback) { let rec ...

  5. tp5 数据库相关操作笔记

    这里如何连接多个数据库? 1,在conif.php文件中添加一个数据库配置(把database.php文件内容复制一份过来),这里取名为db2 2,在控制器的方法中使用 mysql中的参数绑定 mys ...

  6. unity 优化之overdraw查看

    scene视图里面能直接看,打开左上角那个下拉选项,选择overdraw就行 转载篇在game视图下查看overdraw:       https://blog.csdn.net/complicate ...

  7. C/C++中字符串与数字转换

    本文总结了四种字符串和数字相互转换的方法,方法一和方法二是c++中的方法,方法三和方法四是C语言库函数的方法. 方法一:c++11中string中添加了下面这些方法帮助完成字符串和数字的相互转换 st ...

  8. java String 提供的方法

    String类的判断功能: * boolean equals(Object obj):比较字符串的内容是否相同,区分大小写 * boolean equalsIgnoreCase(String str) ...

  9. Elastic Kibana - Install as windows service

    #1 通过windows sc 服务命令安装 sc create "Kibana661" binPath= "{path}\kibana.bat" depend ...

  10. 组件--Fragment(碎片)第二篇详解

    感觉之前看的还是不清楚,重新再研究了一次 Fragment常用的三个类: android.app.Fragment 主要用于定义Fragment android.app.FragmentManager ...