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