Bootstrap-fileinput控件的使用

  最近由于公司需求，用到了bootstrap-fileinput插件上传文件，简单写个博客记个笔记。

 1、上传文件用的比较广泛，所以还是比较重要的。

       虽然可以在表单中使用<input type="file"/>来上传文件，但效果是比较简陋的，而且不支持预览，当然使用bootstrap-fileinput可以解决这个问题。

 2、使用步骤。

     2.1、由于bootstrap-fileinput是一个第三方插件，所以你需要下载它，下载地址，进去后点击Source进入GitHub下载即可。下载完后解压后如图所示：

     


   我们只需要css、img‘、js、themes文件夹即可，examples中有一个index.html，是一个demo网页。

  2.2、在页面引入插件的css、js‘文件。如下：

<link href="${base}/res/common/css/bootstrap.min.css" rel="stylesheet">
<link href="${base}/res/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="${base}/res/plugins/bootstrap-fileinput/themes/explorer/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="${base}/res/common/js/jquery-2.1.1.min.js"></script>
<script src="${base}/res/common/js/bootstrap.min.js"></script>
<script src="${base}/res/plugins/bootstrap-fileinput/js/plugins/sortable.js" type="text/javascript"></script>
<script src="${base}/res/plugins/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="${base}/res/plugins/bootstrap-fileinput/js/locales/fr.js" type="text/javascript"></script>
<script src="${base}/res/plugins/bootstrap-fileinput/js/locales/es.js" type="text/javascript"></script>
<script src="${base}/res/plugins/bootstrap-fileinput/themes/explorer/theme.js" type="text/javascript"></script>

由于这个控件依赖于bootstrap，所以我们需要引入bootstrap的js以及cs。简短介绍看这儿,下载Bootstrap完成后如果单独拷贝Bootstrap的js、css文件，不要忘记拷贝fronts文件夹下的文件，否则页面将缺少一些字体，显得不美观。

2.3、初始化控件

<input type="file" class="file" id="test-upload" multiple/>
<script type="text/javascript">
$("#test-upload").fileinput({
uploadUrl: uploadFile, // 上传文件的路径
uploadAsync: true     //是否异步上传
});
</script>

完成了初始化，让我们看下界面吧。



初始化含有许多参数，先来看一下能在页面显示出效果的参数吧！如下图：



   再来看一下不会显示在页面的参数吧！

$("#file1").fileinput({
theme:"fa",                                   //主题
uploadUrl:"http://localhost:8080/uoloadFile", // 文件上传路径
uploadExtraData: {name: 1},                   // 上传额外的数据,相当于多了一个name参数，值为1
previewFileType: 'image',                     //预览的文件类型，支持video、pdf、img、txt等
allowedPreviewTypes: undefined,               //允许预览的类型
allowedPreviewMimeTypes: null,                //允许预览的MIME类型
allowedFileTypes: null,                       //允许上传的文件类型
allowedFileExtensions: null,                  //允许上传的文件拓展名，数组，如果设置为png，那么jpg就不能上传
minFileSize: 0,                           	  //上传文件的最小size，如果为0，则不限制
maxFileSize: 0,                               //上传文件的最大size
maxFilePreviewSize: 25600, // 25 MB           //支持预览文件的最大size
minFileCount: 0,                              //最小文件上传数量
maxFileCount: 0,                              //最大文件上传数量
uploadAync:true                               //是否异步上传
});

这儿要注意的是uoloadAync这个属性，如果为true，那么上传多个文件就是多个请求，为false则为1次请求，即上传3个文件会发三次请求，且这三次请求不能保证顺序，如果要求保证上传文件的顺序，要么设置为false，要么就采用其他方式保证顺序。

   初始化完成，如果需求有变化可能会改变上传文件的url或者改变一些其他的属性，那么这时候再来初始化就不起作用了，怎么办呢？

   可以使用这种方式 刷新一些参数 ：$("#file1").fileinput("refresh",{showBrowse:false});

  

2.3、初始化完成，但我们的事情还没有完成，还需要为它添加一些事件。

     上传文件，一般都会和一个实体相联系起来，且文件不是在表单提交的时候上传，而是在表单提交前上传完毕。所以可以在文件上传完毕后返回文件实体的id等唯一性标识。

     例如下面的方式：

   

//文件上传成功后
$("#file1").on("fileuploaded",function(event, data, previewId, index) {
//event当前事件，data则是数据，包括上传后服务器返回的数据+ 自身的一些数据
//data.response才为服务器返回的数据，如果是data.filenames则为当前要上传的文件名(不包括上传的)
//previewId 预览的下标，从0开始计算，注意并不是数字，而是一串字符串 + _index
//index 下标，预览下标与index不一致，因为当你导入sortable.js可以排序就可能会不一致

});
//文件清空后
$('#fileupload1').on('filecleared', function(event) {
$('#upload-files').val("");
});

//文件移除后
$('#fileupload1').on('filesuccessremove', function (event, id) {});

除了上面几个事件，你还可以添加其他事件，更多事件参考官方文档，虽然是英文，但不是太难，http://plugins.krajee.com/file-input#events

使用以上几点基本可以完成文件上传。但除了上传之后，还可能需要编辑时预览已经上传的文件，并对其作出排序、删除等操作。

2.4、初始化预览参数

$("#file1").fileinput({
theme:"fa",                                   //主题
uploadUrl:"http://localhost:8080/uoloadFile", // 文件上传路径
uploadExtraData: {name: 1},                   // 上传额外的数据
previewFileType: 'image',                     //预览的文件类型，支持video、pdf、img、txt等
allowedFileTypes: null,                       //允许上传的文件类型
allowedFileExtensions: null,                  //允许上传的文件拓展名，数组，如果设置为png，那么jpg就不能上传
minFileSize: 0,                           	  //上传文件的最小size，如果为0，则不限制
maxFileSize: 0,                               //上传文件的最大size
maxFilePreviewSize: 25600, // 25 MB           //支持预览文件的最大size
minFileCount:
4000
0,                              //最小文件上传数量
maxFileCount: 0,                              //最大文件上传数量
uploadAync:true,                               //是否异步上传
deleteUrl:"http://localhost:8080/deleteFile", //删除文件的链接
overwriteInitial: false,                      //是否覆盖初始化的文件，默认为true，当要上传多个文件时建议改为false
initialPreviewAsData: true,                   //初始化预览视图解析为数据
initPreview:[],                                //初始化视图的链接，是一个数组
initConfig:[{                                 //初始化时的一些配置，数组，与initPreviw长度对应
width:'100px', //预览的高度
url:"http://localhost:8080/deleteFile", //点击删除按钮时访问的链接
key:1,//访问链接会带上的参数
type:"image", //预览的文件类型，会覆盖上面的FileType
caption:"预览标题",
size:165,//显示预览文件的大小
extra:{} //访问删除链接时除了key额外会带上的参数
},{}]
});

注意：该插件初始化预览的功能有缺陷，尝试了多次，发现只能预览图片和pdf，如果预览其他类型文件成功的小伙伴记得评论下。