帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery Fileselect表单文件选择框美化插件(适用于bootstrap4)

帝国模板之家 2020-11-05 网页特效 评论

bootstrap-fileselect.js是一款轻量级的表单文件选择框美化插件,基于jQuery+bootstrap4实现,对默认的bootstrap4选择文件上传字段进行了美化。

功能:

  • 适用于多个文件和单个文件。
  • 可定制按钮样式和位置。
  • 限制可上载文件的数量。
  • 限制允许上传的文件扩展名。
  • 限制允许的文件大小。
  • 多种语言。
  • 支持验证和回调。

使用方法:

1.在html文档中加载jQuery库和bootstrap4框架。

<link href="/path/to/bootstrap.min.css" type="text/css">
<script src="/path/to/jquery.min.js"></script>

2.在jQuery之后加载bootstrap-fileselect.js插件。

<script src="bootstrap-fileselect.js"></script>

3.初始化文件域字段。

<input type="file" name="demo" />
$('#demo').fileselect();

4.禁用浏览按钮的样式。

$('#demo').fileselect({
  restyling: false
});

5.插件目前支持3种验证规则:

$('#demo').fileselect({
  allowedNumberOfFiles: 3,
  allowedFileExtensions: ['zip'],
  allowedFileSize: 2097152
});

6.插件使用浏览器语言,也可以定义一种语言。如果定义的语言不受支持,那么插件将使用英语。

$('#demo').fileselect({
  language: 'de'
});

7. 验证回调显示验证消息,如下所示:

$('#demo').fileselect({
  allowedFileExtensions: ['zip'],
  validationCallback: function (m, type, instance) {
    instance.$inputGroup.after('<span class="small text-danger">' + m + '</span>');
  }
});

8. 所有默认选项

$('#demo').fileselect({
  restyling: true,
  allowedFileSize: false,
  allowedFileExtensions: false,
  allowedNumberOfFiles: false,
  language: false,
  translations: {},
  validationCallback: function (message, instance) {
      alert(message);
  }
});

9.事件

$('#demo').fileselect()
.on('bs.fs.validate', function (e, instance) {
    // before validation
});
.on('bs.fs.validated', function (e, instance) {
    // after validation
});
.on('bs.fs.change', function (e, instance) {
    // before each change
});
.on('bs.fs.changed', function (e, instance) {
    // after each change
});
.on('bs.fs.file-size-validate', function (e, instance) {
    // before file size validation
});
.on('bs.fs.file-size-validated', function (e, instance) {
    // after file size validation
});
.on('bs.fs.file-extensions-validate', function (e, instance) {
    // before file extensions validation
});
.on('bs.fs.file-extensions-validated', function (e, instance) {
    // after file extensions validation
});

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言