您的位置：首页 > Web前端 > CSS

input[tyle="file"]样式修改及上传文件名显示

2016-11-01 17:50 232 查看

默认的上传样式我们总觉得不太好看，根据需求总想改成和上下结构统一的风格……

实现方法和思路：

　　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>

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航