扒⼀扒使⽤boostrap-fileinput上传插件遇到的坑，Bootstrap-
fil。。。
由于公司项⽬的需求，需要实现动植物名录的添加，包括姓名等信息和图⽚等，需要使⽤bootstrap-fileinput的上传插件，在提交添加界⾯表单数据的同时上传⼀张或者多张图⽚，并将上传的图⽚保存到本地磁盘中(本⽂是f：盘的⽬录下)，在在实现的时候，不适⽤bootstrap-fileinput上传插件本⾝的上传按钮（因为本⾝的按钮只能上传图⽚），需要点击提交，将表单的其他信息和图⽚⼀起提交到后台。
为什么使用bootstrap?
实现思路：原来我的思路是不使⽤插件的上传按钮，⽽⾃⼰通过js将插件⾥⾯的多⽂件与表单⼀起提交，但是到后台只能获取到最后⼀个⽂件，我不是⽂件数组。我查了很多办法好像都没办法，后来改变思路：还是⾃⼰⽤js触发提交表单，只是先将表单其他数据传到后台保存返回数据库id，然后通过$('#add_bachPic').fileinput('upload')；触发提交⽂件上传，并传递额外参数id，最后根据传递的额外参数，修改相应的实体类中的字段，将上传的图⽚的名字，修改并保存数据库的pictureurl字段中！
⼀、先来说说bootstrap-fileinput .js
这是⼀个增强的 HTML5 ⽂件输⼊控件，是⼀个 Bootstrap 3.x 的扩展，实现⽂件上传预览，多⽂件上传等功能。
⼀般情况下，我们需要引⼊下⾯两个⽂件，插件才能正常使⽤：
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js
简单的界⾯效果如下所⽰，和众多上传⽂件控件⼀样，可以接受各种类型的⽂件。当然，我们也可以指定具体接受的⽂件类型等功能。
简单的界⾯效果如下所⽰，和众多上传⽂件控件⼀样，可以接受各种类型的⽂件。当然，我们也可以指定具体接受的⽂件类型等功能。
如果需要考虑中⽂化，那么还需要引⼊⽂件：
bootstrap-fileinput/js/fileinput_locale_zh.js
这样基于MVC的Bundles集合，我们把它们所需要的⽂件加⼊到集合⾥⾯即可。
//添加对bootstrap-fileinput控件的⽀持
css_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/css/fileinput.min.css");
js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput.min.js");
js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput_locale_zh.js");
bootstrap-fileinput的各个js下载地址：download.csdn/detail/zlb_lover/9917925
本项⽬实现的效果如下：
实现的代码如下
1、jsp中 添加上传的input 框。
<input id="fish_file" name="fish_file" type="file" multiple  class="file"  data-show-upload="false" data-show-
caption="true">
2 js，中，（本项⽬主要涉及两个js，分别是animal.js 和upload.js）
在animal.js中主要实现打开上传的模态框，
关键⽅法如下：代码中注释为红⾊部分，较为关键，具体作⽤看注释。
$("#btn_insect_add").click(function () {
$(".insect").val("") //根据类名移除上⼀次增昆⾍名录时的填写的所有的内容。
/**
* 以下代码是为了移除 bootstrap fileinput上传插件上⼀次选择的⽂件，当再次打开时，清空上次选择的⽂件，
* 实现的思路是：每次打开模态框时先清楚div中的input ⽂件上传框，然后再在相应的div中动态添加，⽂件上传框，并调⽤初始化的⽅法。
*
*/
/
$("#div_insect_file").empty();
var element='<input id="insect_file" name="insect_file" type="file" multiple  class="file insect"  data-show-
upload="false" data-show-caption="true">';
$("#div_insect_file").append(element);
insectFileInput("insect_file","/SongshanManagement/animalcontent/addinsectPicture.html");
openModal("insectAddDetail");
});
2、upload的js中，实现的实路是，先点击提交，通过ajax提交表单的信息，在提交成功的success响应⽅法中，触发图⽚上传的⽅法。在bootstrap-fileinput的使⽤时，⾸先要初始化，⽅法如下：
$(function () {
fishFileInput("fish_file","/SongshanManagement/animalcontent/addfishPicture.html");
}
//初始化鱼类名录信息上传的fileinput控件
function fishFileInput(ctrlName, uploadUrl) {
$("#fish_file").fileinput({
language: 'zh', //设置语⾔
uploadUrl: '/SongshanManagement/animalcontent/addFishPicture.html', //上传的地址enctype: 'multipart/form-data',
allowedFileExtensions : ['jpg', 'png','bmp','jpeg'],//接收的⽂件后缀
showUpload: false, //是否显⽰上传按钮
showPreview: true,              //展前预览
showCaption: false,//是否显⽰标题
maxFileSize : 10000,//上传⽂件最⼤的尺⼨
maxFilesNum : 10,//
dropZoneEnabled: false,//是否显⽰拖拽区域
browseClass: "btn btn-primary", //按钮样式
uploadAsync: false,
layoutTemplates :{
// actionDelete:'', //去除上传预览的缩略图中的删除图标
actionUpload:'',//去除上传预览缩略图中的上传图⽚；
actionZoom:''  //去除上传预览缩略图中的查看详情预览的缩略图标。
},
uploadExtraData:function (previewId, index) {
//向后台传递id作为额外参数，是后台可以根据id修改对应的图⽚地址。
var obj = {};
obj.id = fishId;
return obj;
}
}).on("filebatchuploadsuccess", function(event, data) {
sponse){
closeModal('fishAddDetail') 关闭模态框。
$("#bootstraptable_fishcontent").bootstrapTable("refresh");
}
}).on('fileerror', function(event, data, msg) {  //⼀个⽂件上传失败
console.log('⽂件上传失败！'+msg);
});
}
3.提交按钮的点击事件。
//新增鱼类名录模态框的提交按钮点击事件。
$("#btn_add_fish").click(function () {
var picturename="";//获取上传的⽂件的后缀名，如果不是jpg，或者png的话不出发上传，弹出提⽰，表单⾥⾯的其他内容也不上传。
picturename=$("#fish_file").val().substring($("#fish_file").val().indexOf('.'),$("#fish_file").val().length).toUpperCase();
/*当上传的⽂件的格式是.png .jpg .PNG .JPG时先将表单内的除图⽚以外的东西提交到后天，然后在触发插件，将图⽚上传，保存。
*/
if (picturename ==".JPG"  || picturename ==".PNG" || picturename =="" || picturename==".BMP"||
picturename==".JPEG") {
$.ajax({
type: 'post',
url: '/SongshanManagement/animalcontent/addfishcontent.html',
data: $("#form_addfishContent").serialize(),
success: function (data) {
fishId = data;
//不上传图⽚时，不触发bootstrap 上传插件的初始化⽅法。仅将表单⾥⾯的（除图⽚以外的）内容提交，
if ($("#fish_file").val() != "") {
$('#fish_file').fileinput('upload'); //触发插件开始上传。
}
else {
closeModal('fishAddDetail');
$("#bootstraptable_fishcontent").bootstrapTable("refresh");
}
}
});
}else {
alert("只能上传.jpg，.png，.PNG,.JPG,bmp,jpeg格式的图⽚");
return false;
}
});
后台⽅法。如下。
/**
*
* 先上传鱼类表单⾥⾯的内容，然后在上传图⽚，根据保存的主键的id，修改对应的pictureurl;
* @param fishContent
* @return
* @throws Exception
*/
@RequestMapping(value="/addfishcontent.html")
@ResponseBody
public int addFishContent(FishContent fishContent) throws Exception {
int a=this.animalContentImp.addFishContent(fishContent);
return a;
}
/**
*  在上⼀步，添加完鱼类名录的其他信息后（上次添加植物名录，没有填写对应图⽚的pictureurl）上传完图⽚后，根据id 修改刚才添加的名录的pictureurl
* @param id
* @param request
* @param fish_file
* @return
*/
@RequestMapping(value="/addFishPicture.html", method=RequestMethod.POST)
@ResponseBody
public String addFishPic(int id, MultipartHttpServletRequest request, @RequestParam MultipartFile[] fish_file){
try{
if(fish_file!=null&& fish_file.length>0){
//组合image名称，“#隔开”
String pictureurl =""; //⽤来接收拼接各个图⽚的名字，并保存到数据库。
for(int i=0;i<fish_file.length;i++){
if(!fish_file[i].isEmpty()){
pictureurl=pictureurl+UploadFileUtils.uploadImage(request,fish_file[i]);
}
}
//上传成功
if(pictureurl!=null&&pictureurl.length()>0){
System.out.println("上传成功！"+pictureurl); //
this.animalContentImp.updateFishPicture(id,pictureurl);
}else {
System.out.println("上传失败！");
}
}
} catch (Exception e) {
e.printStackTrace();
}
return "0";
}
//保存上传的⽂件的UploadFileUtils⼯具类如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。