修改默认input（file）的样式

以上是默认的

<input type="file" >

但是丑爆了啊同志们~~长久以来都是调用大神的代码，今天我也小试牛刀，做出了如下效果：

这样还是能接受的样子啦~

LOOK！

html文件：

<div class="divBox div1">
    <div class="fileName"></div>
    <button>选择文件</button>
    <input type="file" class="file">
</div>

css文件：

        .divBox{
            position: relative;
            display: inline-block;
        }
        button{
            display: inline-block;
            width: 80px;
            height: 34px;
            line-height: 34px;
            background: #FFA837;
            border-radius: 0px 4px 4px 0px;
            text-align: center;
            color: #fff;
            vertical-align: top;
        }
        input{
            width: 80px;
            height: 34px;
            position: absolute;
            top: 0px;
            right: 0px;
            opacity: 0;
            filter:Alpha(opacity=0); /*透明度兼容IE8*/
            vertical-align: top;
        }
        .fileName{
            display: inline-block;
            width: 150px;
            height: 34px;
            line-height: 34px;
            padding:0px 5px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            border: 1px solid #eee;
            vertical-align: top;
            float: left;
        }
        .div1{
            margin:30px;
        }        

js文件：

        function upFile(fileBox){
            var path;
            var fileName;
            var file=fileBox.children(".file");
            var fileFrame=fileBox.children(".fileName");
            file.change(function (path){
                    path=$(this).val();//path为获取的<input type="file">的文件名或文件路径
                    if(path!=‘‘){
                        var pos1 = path.lastIndexOf(‘/‘);
                        var pos2 = path.lastIndexOf(‘\\‘);
                        var pos  = Math.max(pos1, pos2)
                        if( pos<0 ){
                            fileName =path;
                            fileFrame.text(fileName);
                            fileFrame.attr("title",fileName);
                        }
                        else{
                            fileName=path.substring(pos+1);//截取从pos+1索引到末尾
                            fileFrame.text(fileName);
                            fileFrame.attr("title",fileName);
                        }
                    }
            });
        }
        upFile($(".div1"));

以后只要调用upFile()就可以啦~是不是超级棒~超级美~

兼容：IE8+，firefox,chrome~

过来为菜鸟点赞吧！