input[tyle="file"]样式修改及上传文件名显示
Posted 蓝眼睛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input[tyle="file"]样式修改及上传文件名显示相关的知识,希望对你有一定的参考价值。
默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格……
实现方法和思路:
1.在input元素外加a超链接标签
2.给a标签设置按钮样式
3.设置input[type=\'file\']为透明,并定位,覆盖在a上面
html代码:
<a class="input-file input-fileup" href="javascript:;"> + 选择文件<input size="100" type="file" name="file" id="file"> </a>
css代码:
.input-file{ display: inline-block; position: relative; overflow: hidden; text-align: center; width: auto; background-color: #2c7; border: solid 1px #ddd; border-radius: 4px; padding: 5px 10px; font-size: 12px; font-weight: normal; line-height: 18px; color:#fff; text-decoration: none; } .input-file input[type="file"] { position: absolute; top: 0; right: 0; font-size: 14px; background-color: #fff; transform: translate(-300px, 0px) scale(4); height: 40px; opacity: 0; filter: alpha(opacity=0); }
效果:
此时并不能显示上传的文件名,如需显示出上传的文件名需要js来处理
js代码:
<script> $(function(){ $(".input-fileup").on("change","input[type=\'file\']",function(){ var filePath=$(this).val(); if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){ $(".fileerrorTip1").html("").hide(); var arr=filePath.split(\'\\\\\'); var fileName=arr[arr.length-1]; $(".showFileName1").html(fileName); }else{ $(".showFileName1").html(""); $(".fileerrorTip1").html("您未上传文件,或者您上传文件类型有误!").show(); return false } }) }) </script>
同时需要给html加上两个div
<a class="input-file input-fileup" href="javascript:;"> + 选择文件<input size="100" type="file" name="file" id="file"> </a>
<div class="fileerrorTip1"></div> <div class="showFileName1"></div>
效果:
以上是关于input[tyle="file"]样式修改及上传文件名显示的主要内容,如果未能解决你的问题,请参考以下文章
Error in read.dcf(file.path(pkgname, "DESCRIPTION"), c("Package", "Type&quo
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value=&quo