Bootstrap-FileInput插件的应用

关于Bootstrap

Bootstrap是一款简洁、优雅的前端框架，与JQuery集成良好，能够快速地构造整齐美观的页面。相对于别的前端框架来说，Bootstrap还是比较容易上手的，开源的成熟框架、响应式CSS能够适应多种不同的终端，插件也很丰富，因此对于不是专注于前端的人员来说，使用Bootstrap是一个不错的选择。目前主要有两个版本3和4，我个人使用下来感觉还是用3舒服一些，因为3的文档更多更全而且4去掉了glyphicons的支持有些难受。

关于FileInput插件

对于原生的<input type='file' ...>标签，首先样式来说比较丑陋，其次功能上不能适应真实产品环境，而对于Bootstrap来说，框架本身并没有给予文件上传的功能。好在已经有FileInput这款文件上传插件，能够提供比较完善的文件上传功能，这款框架的主页是http://plugins.krajee.com/file-input 。这是一款增强的HTML5文件输入插件，目前（2018.6）最新版支持Bootstrap3和4 。

几个比较重要的特性：

能够预览图片
能够通过ajax进行上传，提供每个图片异步上传和所有图片同步上传两种方式
能够定制绝大部分控件上的信息，包括图片类型、大小限制，某些功能是否显示，控件图表等待。

环境搭建

首先需要Bootstrap（以Bootstrap3为例），下载Bootstrap、JQuery、FileInput插件（都去官网下即可）。FileInput下载下来（当前版本4.4.8）并解压后主要包含了css、examples、img、js、nugut、scss、themes这几个文件夹。打开examples文件下的网页文件就可以看到提供的使用示例，简单操作一下就可以了解到这款插件提供的文件上传交互形式。

最基本的情况来说，需要fileinput.min.css、fileinput.min.js、zh.js（中文化）这三个文件即可，另外需要将img文件夹下的两个gif也拷贝到项目中相同的相对路径当中（如果不清楚也可以先跑起来然后查看请求信息将资源放到对应的目录）。themes文件下是提供的几个主题，主要是改变界面样式，如果需要使用，把对应文件夹下的内容也引入即可，主题个人用下来感觉一般，可以不用或者自己调整。

基本用法

可以在示例网页文件中截取一段来进行更改。首先作为文件上传功能，需要一个form和input标签：

<form enctype="multipart/form-data">
  <label for="file-0b">Test invalid input type</label>
  <div class="file-loading">
    <input id="bs-file-input" name="file" class="file" type="text" multiple>
  </div>
</form>

然后在页面尾部添加js代码进行初始化：

<script type="text/javascript">
$(function(){
    $('#bs-file-input').fileinput({
        language: 'zh',
        uploadUrl: '/upload-example-url',
        maxFileCount: 1,
        allowedFileExtensions: ['jpg', 'png', 'gif'],
})
</script>

不出意外的话，这样就可以看到一个最基本的fileinput插件出现在页面中。

很明显，fileinput方法中的json就是对于插件的配置信息。配置的内容项非常多，说明的话官网中有，网上也有一些中文的说明，这里就不展开说明了。

如果出现没有图标的情况，那么就要查看是不是缺失了svg文件，bootstrap3下不使用theme的话，采用的是glyphicons的图标。

实际应用

在本网站的后台页面制作过程中，有需要为文章添加说明图片的功能。基本逻辑流程为：点击按钮弹出模态框显示文件上传控件，选择1个图片文件后点击模态框的按钮将图片上传至图片服务器返回图片url并写入另外的form。这样就与它本身默认的流程有一定的出入，并不是直接把文件和其他信息一并上传，而是先上传文件得到url。

那么在这种情况下，不能用form中的button直接进行提交、限制一个文件、在图片预览框和文件选择框中不可以有上传按钮、上传成功后关闭模态框。逐个解决：

模态框按钮绑定方法，方法中调用$(‘#bs-file-input).fileinput(“upload”)来进行ajaxform提交
配置参数中增加maxFileCount：1和autoReplace: true
配置参数中增加showUpload: false和layoutTemplates: {actionDelete:’’, actionUpload:’’ }
使用Synchronous模式并增加文件上传成功的回调方法，事件名称为filebatchuploadsuccess，在这个回调方法中处理成功后的页面逻辑，包括关闭模态框等。