BootStrap增强型的多文件上传控件BootStrap-FileInput

     基于BootStrap项目需求一款多文件上传控件,通过筛选分析发现了BootStrap-FileInput这款控件(开源),能满足

大多数文件上传需求,简单写一下使用方法和遇到的坑！！

项目开源地址：https://github.com/kartik-v/bootstrap-fileinput

官网：http://plugins.krajee.com/file-input

项目的前后台基本上就是使用很典型的组件 BootStrap + SpringMVC

       项目下载下来是个*.tar或者*.zip，解压下来，将解压后的js和css目录放到项目的合适位置就好了，而且

直接引用就OK了!!

       FileInput典型的应用就是作为独立的上传控件直接和后台进行交互,这个网上与很多案例，可以直接参考

我使用的场景是嵌入到一个Form中,只是将FileInput作为一个前端文件添加控件,Form提交时,添加的文件作为

Form中一项和Form一起提交,如图：

效果就是这样的，当然尺寸和控件功能按钮都是编程可配置的,js代码的初始化片段如下：

$("#simple").fileinput({
		    theme: "explorer",     //这个是选项需要引入一个增强控件 Krajee Explorer Theme
		    uploadUrl: "/simple",  // 如果是作为Form提交的一部分，这里的地址伪造一个假的,但必须要写，否则组件的部分功能按钮不会正常显示
		    allowedFileExtensions: ["jpg", "jpeg", "gif", "png","bmp","pdf"], //支持的文件类型
		    overwriteInitial: false,
		    initialPreviewAsData: true,
		    showUpload: false,  //不展示上传功能按钮
		    showCancel:false,   
		    maxFileCount: 6,    //最大上传6张
		    minFileCount: 1,    //最小上传一张
		    maxFileSize: 1024*10,     //单位为kb，如果为0表示不限制文件大小
                    fileActionSettings:{showUpload:false}, //控制Actions按钮展示
		});

提交form前需要手动编程将控件添加的File对象取出,然后放在FormData对象中上传后台,代码片段如下:

        	var certFiles = $('#simple').fileinput('getFileStack');  //这个是组件方法getFileStack,返回已选择的File对象数组
        	if (certFiles.length == 0){
        		new PNotify({
        			title : '后台入金',
        			text : '请至少上传1个凭证文件',
        			type : 'error'
        		});
                	return ;
        	}
        	if (certFiles.length > 6){
        		new PNotify({
        			title : '后台入金',
        			text : '最多允许上传6个凭证文件',
        			type : 'error'
        		});
                	return ;
        	}
        	for (var i=0;i

@RequestParam(required = false, name="simpleFiles") MultipartFile[] simpleFiles