input file样式修改的同时获取文件名

应为项目当中上传文件中有需要input file这个属性，但是浏览器自带样式真的太丑了，还不统一，所以找了一些其他的进行参考，结果很失望啊，也许是问题太简单了。进入正题；

html
<p class="shofs">点击这里上传文件</p>
            <input type="file" name="" multiple="multiple" id="fil">

我把p标签放在input的前面，原因我稍后解释。

css
#fil {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
                filter: alpha(opacity=0);
                cursor: pointer;
            }

            .shofs {
                position: absolute;
                left: 6px;
                top: -10px;
                width: 74%;
                height: 40px;
                line-height: 40px;
                color: #999;
                text-align: left;
                text-indent: 2em;
                border: 1px solid #00A4E4;
            }

简单的做了一下样式更改，主要是原有的input透明度为0；让我们的视觉看不到，其他的就不多解释了，我们来看js

js
    var str;
            $('#fil').change(function() { //<input type="file" name="" multiple="multiple" id="fil">
                str = $(this).val();
//              console.log($(this).val());
                var arr = str.split('\\'); //注split可以用字符或字符串分割,这里是分割成三个长度，找到长度对应的下标
//              console.log(arr)
                var name = arr[arr.length - 1]; //这就是要取得的图片名称
//              console.log(name);
                console.log($(".shofs").text(name));

            })

这里引用了jq，因为我们用到了jq change（）事件。
下面上效果图


但是这里有一个bug,就是上传完文件以后我们更改文件的时候点击取消，会出现空白区。

其他的方法也有很多，欢迎大神告知