bootstrap组件：fileinput控件的非常规操作

在fileinput控件的使用中遇到了一个问题，就是分了三次选了三个文件，点击form提交的时候只会出现最后一次选择的文件

而我想要的是选中的所有文件一起上传。多方查找之后确定了一种可行方案，分享如下：

    1.引用

和基本引用一样，样式和js

2.fileinput_setting.js内容

$("#file").fileinput({
    language: 'zh', //设置语言
    uploadUrl:'#',
    textEncoding:'UTF-8',//字符显示格式
    showUpload :false, //是否显示上传按钮
    showRemove :true, //显示移除按钮
    showPreview :true, //是否显示预览
    showCaption :true,//是否显示标题
    //browseClass:"btn btn-primary", //按钮样式    
    allowedPreviewTypes: ['image'],//只预览图片
    dropZoneEnabled: false,//是否显示拖拽区域
    dropZoneTitleClass:'kanq-dropZoneTitleClass',
    uploadAsync: false, //默认异步上传
    enctype:'multipart/form-data',
    previewFileIcon:'<i class ="fa fa-file"> </ i>',	 
    maxImageWidth: 50,//图片的最大宽度
    maxImageHeight: 50,//图片的最大高度 
    allowedPreviewTypes :null , 

});

（注：自己有什么特定需求自己添加）

到此为止我们可以看到我们的界面如下：

选择框正常显示，选中文件后的界面如下：

恩，样式自己调整的，还算漂亮。前四个是一起选择的，最后一个是单独选择的，如果就这样和表单一起提交的话，后台只能获取到一个文件的数据。如下：

然而我想要四个一起获取到，怎么设置呢，只需要在input的属性上添加数据如下：

//多选文件操作
$("#file").click(function(){
	  $(this).clone(true).insertAfter(this);
	  $("#file").attr("style","display:none;");//: none;
});

然后我们按照相同方式操作并提交表单，结果如下：

因为在添加最后会多一个file文件，但是是空的，所以四条记录上传成功。

5.完毕，如有高见，还望不吝赐教。

再加入一个压缩包，把源码下载过来改了一下。

演示界面：

bootstrap-fileinput-master\examples\demo.html

下载地址：

https://download.csdn.net/download/u011561335/10275937