首页 > 代码库 > input[tyle="file"]样式修改及上传文件名显示
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"]样式修改及上传文件名显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。