首页 > 特效插件 > 表单按钮 >  基于jQuery的niceFileInput文件上传框美化插件正文

基于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',    //按钮和文本框间距
});


下载 提取码/密码:j5i5(点击复制密码) 预览