input(file)样式修改及上传文件名显示

最新推荐文章于 2022-07-05 17:34:59 发布

原创最新推荐文章于 2022-07-05 17:34:59 发布 · 1.4w 阅读

7 ·

CC 4.0 BY-SA版权

实现思路：

a标签包裹input元素
设置a标签为上传按钮的样式，相对定位
设置input为透明，绝对定位，覆盖到a上面

效果：看到的按钮是a的样式，点击时实际是点击input元素。样式和功能都具备

html代码：

<a href="javascript:;" class="file">选择文件 
　　<input type="file" > 
</a>

CSS代码：

.file {
    position: relative;
    display: inline-block;
    border: 1px solid #333;
    padding: 4px 10px;
    overflow: hidden;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    border-radius: 5px;
    color: #000;
    background:#ccc; /* 一些不支持背景渐变的浏览器 */  
    background:-moz-linear-gradient(top, #fff, #ccc);  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc));  
    background:-o-linear-gradient(top, #fff, #ccc); 
}
.file input {    
    position: absolute;    
    font-size: 50px;    
    right: 0;    
    top: 0;    
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

效果：

此时上传文件的文件名不显示，需要用js处理：

$(".file").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

    }

})

效果: