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

Posted 王永峰的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input(file)样式修改及上传文件名显示相关的知识,希望对你有一定的参考价值。

实现思路:

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

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

html代码:

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

CSS代码:

.file {
    position: relative;
    display: inline-block;
    background: #ccc;
    border: 1px solid #333;
    padding: 4px 20px;
    overflow: hidden;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    border-radius: 20px;
    color: #333;
    font-size: 13px;

}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
 
.gradient{
   
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);/*IE8*/    
    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); 
}

效果:

 

此时上传文件的文件名不显示,需要用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 
    }
})

效果:

 

以上是关于input(file)样式修改及上传文件名显示的主要内容,如果未能解决你的问题,请参考以下文章

修改input file 文件上传的样式

自定义input文件上传 file的提示文字及样式

使用jquery.form.js实现文件上传及进度条前端代码

HTML5的 input:file上传 样式美化及表单异步提交

上传文件控件的样式美化

上传下载文件