扒一扒使用boostrap-fileinput上传插件遇到的坑，Bootstrap-fileinput上传插件的使用详解

转自 https://blog.csdn.net/zlb_lover/article/details/76548772

由于公司项目的需求，需要实现动植物名录的添加，包括姓名等信息和图片等，需要使用bootstrap-fileinput的上传插件，在提交添加界面表单数据的同时上传一张或者多张图片，并将上传的图片保存到本地磁盘中(本文是f:盘的目录下)，在在实现的时候，不适用bootstrap-fileinput上传插件本身的上传按钮（因为本身的按钮只能上传图片），需要点击提交，将表单的其他信息和图片一起提交到后台。

实现思路：原来我的思路是不使用插件的上传按钮，而自己通过js将插件里面的多文件与表单一起提交，但是到后台只能获取到最后一个文件，我不是文件数组。我查了很多办法好像都没办法，后来改变思路：还是自己用js触发提交表单，只是先将表单其他数据传到后台保存返回数据库id,然后通过$(’#add_bachPic’).fileinput(‘upload’);触发提交文件上传，并传递额外参数id,最后根据传递的额外参数，修改相应的实体类中的字段，将上传的图片的名字，修改并保存数据库的pictureurl字段中！

一、先来说说bootstrap-fileinput .js

这个插件主页地址是：http://plugins.krajee.com/file-input，可以从这里看到很多Demo的代码展示：http://plugins.krajee.com/file-basic-usage-demo。

这是一个增强的 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下载地址：http://download.csdn.net/detail/zlb_lover/9917925

本项目实现的效果如下：

实现的代码如下

1、jsp中 添加上传的input 框。

2 js,中，（本项目主要涉及两个js,分别是animal.js 和upload.js）

在animal.js中主要实现打开上传的模态框，

关键方法如下：代码中注释为红色部分，较为关键，具体作用看注释。

$("#btn_insect_add").click(function () {

$(".insect").val("") //根据类名移除上一次增昆虫名录时的填写的所有的内容。

/

$("#div_insect_file").empty();

var element=’’;

$("#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) {

if(data.response){

closeModal(‘fishAddDetail’) 关闭模态框。

$("#bootstraptable_fishcontent").bootstrapTable(“refresh”);

}

}).on(‘fileerror’, function(event, data, msg) { //一个文件上传失败

console.log(‘文件上传失败！’+msg);

});

}

3.提交按钮的点击事件。

//新增鱼类名录模态框的提交按钮点击事件。

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn_add_fish").…("#fish_file").val().substring(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲fish_file").val…("#fish_file").val().length).toUpperCase();

if (picturename ==".JPG" || picturename “.PNG” || picturename “” || picturename".BMP"|| picturename".JPEG") {

$.ajax({

type: ‘post’,

url: ‘/SongshanManagement/animalcontent/addfishcontent.html’,

data: KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲form_addfishCon…("#fish_file").val() != “”) {

$(’#fish_file’).fileinput(‘upload’); //触发插件开始上传。

}

else {

closeModal(‘fishAddDetail’);

$("#bootstraptable_fishcontent").bootstrapTable(“refresh”);

}

}
    });
}else {
    alert("只能上传.jpg，.png，.PNG,.JPG,bmp,jpeg格式的图片");
    return false;
}
           

});

后台方法。如下。

@RequestMapping(value="/addfishcontent.html")

@ResponseBody

public int addFishContent(FishContent fishContent) throws Exception {

int a=this.animalContentImp.addFishContent(fishContent);

return a;

}

@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工具类如下：

public class UploadFileUtils {

public static String uploadImage(MultipartHttpServletRequest request, MultipartFile file) {

String rootUrl=“F”+"?/"+“plantpictureurl/”;//根目录，

//上传

try {

String[] typeImg={“png”,“jpg”};

if(file!=null){
            String origName=file.getOriginalFilename();// 文件原名称
            System.out.println("上传的文件原名称:"+origName);
                    //存放图片文件的路径
                    String fileSrc="";
                    try{
                        File uploadedFile = new File(rootUrl+"//"+origName);
                        System.out.println("upload==="+rootUrl);
                        OutputStream os = new FileOutputStream(uploadedFile);
                        InputStream is =file.getInputStream();
                        byte buf[] = new byte[1024];//可以修改 1024 以提高读取速度
                        int length = 0;
                        while( (length = is.read(buf)) > 0 ){
                            os.write(buf, 0, length);
                        }
                        //关闭流
                        os.flush();
                        is.close();
                        os.close();
                        fileSrc=origName+"#";
                        System.out.println("保存成功！路径："+rootUrl+"/"+origName);
                    }catch(Exception e){
                        e.printStackTrace();
                    }
                    return fileSrc;
                }
        return null;
    }catch (Exception e) {
        e.printStackTrace();
        return null;
    }
}
           

}

上传的一些细节：例如去除预览缩略图上面的三个图片

实现代码。

作者：再见北洋园

来源：CSDN

原文：https://blog.csdn.net/zlb_lover/article/details/76548772

版权声明：本文为博主原创文章，转载请附上博文链接！