欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

input file样式美化

程序员文章站 2022-06-22 16:33:59
默认样式: 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 获取上传文件的文件名: ......

默认样式:

<input type="file" />

input 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 file样式美化

获取上传文件的文件名:

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

input file样式美化

files.length;      //上传文件个数,可能是多个
files[0].lastmodified    //代表文件的修改日期,而非上传日期
files[0].name;     //上传文件名
files[0].size;     //上传文件大小(单位是b)
files[0].type;     //文件类型