input file样式美化
程序员文章站
2022-06-22 16:33:59
默认样式: 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 获取上传文件的文件名: ......
默认样式:
<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; //文件类型
推荐阅读
-
html5中去掉input type date默认样式的方法
-
关于PHP5.6+版本“No input file specified”问题的解决
-
javascript类型File的Input按钮功能研究
-
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
-
详解no input file specified 三种解决方法
-
input file上传文件样式支持html5的浏览器解决方案
-
css样式之区分input是按钮还是文本框的方法第1/4页
-
控制input的CSS但不影响CheckBox以及Radio的样式
-
Android WebView 不支持 H5 input type="file" 解决方法
-
vue中使用input[type="file"]实现文件上传功能