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,就是上传完文件以后我们更改文件的时候点击取消，会出现空白区。

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