基于jQuery的niceFileInput文件上传框美化插件

正常的HTML文件上传框：

<input type='file'>

显示非常的难看，而且在不同浏览器显示效果还不一样。这里的基于jQuery的niceFileInput文件上传框美化插件，不仅美化了文件上传框，还使得文件上传框在不同浏览器的显示效果保持一致。使用简单，配置方便，插件小巧。 1、引入css

<link rel="stylesheet" href="dist/jquery.nice-file-input.min.css" type="text/css" />

2、将您的上传框加入一个特殊的class，这个class将用来在执行js时，获取到这个上传框

<input type="file" class="nicefile" />

3、引入jQuery库和js

<script src="js/jquery.min.js"></script>
<script src="dist/jquery.nice-file-input.min.js"></script> 

4、调用代码：

$(".nicefile").niceFileInput({
    'width': '500', //宽度，最小150
    'height': '30',  //高度
    'btnText': '浏览', //按钮文字
    'btnWidth': '100' ,  //按钮宽度
    'margin': '20',    //按钮和文本框间距
});