bootstrap的fileinput图片上传前后台示例

   jsp页面截取 

 <link href="style/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">

        <link href="style/bootstrap/dist/css/fileinput.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="style/jquery-1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="style/bootstrap/dist/js/bootstrap.min.js"></script>

 //获得额外参数的方法
        fodderType = function() {
            var hospitalId = $("#addT_BR_R_PID").val();
            var roomId =$("#addT_BR_R_RID").val();
            var phone =$("#addT_BR_USER_PHONE").val();
            var sjz = $("#addT_BR_JD").val();
            var id = hospitalId+","+roomId+","+phone+","+sjz;
            return id;
        };

$("#file-1").fileinput({//点击图片上传

        uploadUrl:"/babyImginfo/uploadImg",//上传的地址
        uploadAsync: true,
        language : "zh",//设置语言
        allowedFileExtensions : ['jpg', 'png','gif'],
        overwriteInitial: false,
        maxFileSize: 10000,
        maxFilesNum: 10,
        //allowedFileTypes: ['image', 'video', 'flash'],
        slugCallback: function(filename) {
            return filename.replace('(', '_').replace(']', '_');
        },
        uploadExtraData: function() {   //额外参数的关键点
            var obj = {};
            obj.fodder = fodderType();
            console.log(obj);
            return obj;
        }
}).on('filepreupload', function(event, data, previewId, index) {
            var form = data.form, files = data.files, extra = data.extra,
                    response = data.response, reader = data.reader;
            console.log('File pre upload triggered');
    }).on("fileuploaded", function(event, data) {
        if(data.response)
        {
        $('#myModal').on('hide.bs.modal',
       
            $("#myModal").modal("hide"),
            location.reload()
            )
        }
            //selectImgList();
            });
        //当点击增加时初始化医院列表
        $(function() {
            $('#myModal').on('show.bs.modal',
                    function getHospitalList() {
                        $("#addT_BR_R_PID").html('<option value=""> 请选择</option>');
                        $.ajax({
                            url:"/babyImginfo/hospitalList",
                            // data:{"pid":objFid},
                            type: "POST",
                            dataType: "json",
                            beforeSend: function () {
                            },
                            complete: function () {
                            },
                            success: function (data) {
                                if (data.status == "SUCCESS") {
                                    $.each(data.pageList, function (i, value) {
                                        $("#addT_BR_R_PID").append('<option value="'+value.T_BR_H_ID+'"> '+value.T_BR_H_NAME+'</option>');
                                    });
                                    // $("#babyRoomModel.T_BR_R_PID").val(objValue);
                                } else {
                                    alert("加载失败！");
                                }
                            }
                        });
                    }
                   // getRoomList("selectT_BR_I_RID","","0")
            )

        });

<div class="row" id="ss" style="height: 600px">
       <input id="file-1"  name=file_upload_url type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1">

</div>

java后台

 /**
     * 添加图片
     * @throws Exception
     */
@RequestMapping(value = "/uploadImg", method = RequestMethod.POST)
@ResponseBody
    public JSONObject uploadImg (BabyImginfoEntity babyImginfo,HttpServletRequest request)throws Exception {
JSONObject jsonObject = new JSONObject();

ServletContext sc = request.getSession().getServletContext();
String path = sc.getRealPath("/upload/roomImg") + "/";
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        List<MultipartFile> list = multipartRequest.getFiles("file_upload_url"); 
        if(list.size()>0){
for(MultipartFile file1 : list){
String fileName = file1.getOriginalFilename();  
fileName = rewriteFileName(fileName);
        File targetFile = new File(path, fileName);  
        if(!targetFile.exists()){  
            targetFile.mkdirs();  
        }  
        //保存  
        file1.transferTo(targetFile); 
        String imgs = "/roomImg/"+fileName;
           System.out.println("文件路径 = " + imgs);
           String fodder = request.getParameter("fodder");
           String[] aa =fodder.split(",");
           String hospitalId =aa[0];
           String roomId = aa[1];
           String phone = aa[2];
           String sjz = aa[3];
           //照片已存入相关位置,下面存入数据库
           babyImginfo.setTSTATUS("1");
           babyImginfo.setTIMG(imgs);
           babyImginfo.setHID(hospitalId);
           babyImginfo.setRID(roomId);
           babyImginfo.setUSER_PHONE(phone);
           babyImginfo.setJD(sjz);
           babyImginfoServiceI.addBabyImg(babyImginfo);
}
        }
        
        jsonObject.put("status", "SUCCESS");
        return jsonObject;
    }