简单介绍

官方地址:Bootstrap File Input - © Kartik


最开始,我使用该插件的时候,就是因为浏览器默认的文件上传样式实在是不堪入目,太过于原始了,而 bootstrap 样式库竟然也没有针对它进行样式改进。下图是浏览器默认样式:


image.png


使用 bootstrap-fileinput 之后,样式如下图:


image.png


引入文件

这里依然采用 bower 安装,安装命令: bower install --save bootstrap-fileinput ,安装完成后,引入如下文件:


<!-- bootstrap-fileinput -->
<link rel="stylesheet" href="/bootstrap-fileinput/css/fileinput.min.css">

<!-- bootstrap-fileinput -->
<script src="/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="/bootstrap-fileinput/js/locales/zh.js"></script>


一个 css 文件,两个 js 文件。


HTML 部分

页面简单的 file 类型 input 标签即可,如下:


<input type="file" name="file" id="file">


JS 调用

调用方式比较简单,但是参数较多,这里同样给出我常用的一些参数,参照如下代码:


$('#file').fileinput({
  language: 'zh',
  // allowedFileExtensions: ['pdf', 'xlsx', 'docx', 'pptx', 'png', 'jpg', 'html'], // 允许的文件后缀名
  // allowedFileTypes: ['image', 'html', 'object'],     // 允许的文件类型
  // showCaption: false,      // 是否显示 input 样式
  // showPreview: false,      // 是否显示预览
  // showUpload: false,       // 选择文件后,是否显示上传按钮
  // maxFileSize: 10,         // 允许最大的文件大小,单位默认为 KB
  // maxFileCount: 5,         // 允许的文件数量,需要在 input 标签上加 multiple 属性
  // initialCaption: '',      // 自定义 input 内默认文字
  // dropZoneTitle: '',       // 预览框文本自定义
  // browseLabel: '',         // 按钮标签
  // layoutTemplates: {          // 自定义布局模版,如下调整了按钮的位置以及预览的样式
  //   main1: '{preview}\n' +
  //     '<div class="input-group {class}">\n' +
  //     '   <div class="input-group-btn">\n' +
  //     '       {browse}\n' +
  //     '       {remove}\n' +
  //     '   </div>\n' +
  //     '   {caption}\n' +
  //     '</div>',
  //   preview: '<div class="file-preview {class}">\n' +
  //     '    <div class="{dropClass}">\n' +
  //     '    <div class="file-preview-thumbnails">\n' +
  //     '    </div>\n' +
  //     '    <div class="clearfix"></div>' +
  //     '    <div class="file-preview-status text-center text-success"></div>\n' +
  //     '    <div class="kv-fileinput-error"></div>\n' +
  //     '    </div>\n' +
  //     '</div>',
  //   footer: '<div class="file-thumbnail-footer">\n' +
  //     '    <div class="file-caption-name" style="width:{width}">{caption}</div>\n' +
  //     '    {progress} {actions}\n' +
  //     '</div>',
  // },
});


上面的示例,大部分都是样式的调整,以及部分的校验,后面的备注已经写得比较详细了,更多的还需要自己去尝试,不多赘述了。其实,默认提供的样式已经很不错了,如下图:


image.png


默认的参数设置可见源代码中 $.fn.fileinput.defaults 的定义,大概在源码的 5255 行处,大部分从参数名也能猜出大概意思,然后通过示例,应该就差不多了。


后台数据处理

该插件大部分时候都是当作 file 类型 input 的样式使用,对于后台数据的处理,不同的语言,处理方式不一样,Node 的常用的处理方案是:使用 formidable - npm 模块。