bootstrapfileinput上传图片

引入js

    href="../static/plugs/css/fileinput.css">

   

                                  class="col-sm-10 myfile" value="" />
             

                                name="companyImage" value="">  

   $(".myfile").fileinput({
        //上传的地址
        uploadUrl:"${pageContext.request.contextPath}/companyBriefController/uploadingFile",
        uploadAsync : true, //默认异步上传
        showUpload : false, //是否显示上传按钮,跟随文本框的那个
        showRemove : false, //显示移除按钮,跟随文本框的那个
        showCaption : true,//是否显示标题,就是那个文本框
        showPreview : true, //是否显示预览,不写默认为true
        dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount : 1, //表示允许同时上传的最大文件个数
        enctype : 'multipart/form-data',
        validateInitialCount : true,
        previewFileIcon : "",
        msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
        allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
        allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
        language : 'zh',
        /* uploadExtraData:function (previewId, index) {    
          var data = {
               URL:"\\temp\\upload\\logo"
            };
          return data;
          上传传值
        } */
    })
    //异步上传返回结果处理
    $('.myfile').on('fileerror', function(event, data, msg) {
        console.log("fileerror");
        console.log(data);
    });
    //异步上传返回结果处理
    $(".myfile").on("fileuploaded", function(event, data, previewId, index) {
        var ref = $(this).attr("data-ref");
        $("input[name='" + ref + "']").val(data.response.url);


    });


    //同步上传错误处理
    $('.myfile').on('filebatchuploaderror', function(event, data, msg) {
        console.log("filebatchuploaderror");
        console.log(data);
    });


    //同步上传返回结果处理
    $(".myfile").on("filebatchuploadsuccess",
            function(event, data, previewId, index) {
                console.log("filebatchuploadsuccess");
                console.log(data);
            });


    //上传前
     $('.myfile').on('filepreupload', function(event, data, previewId, index) {
    console.log(data);
    console.log(event);
        console.log("filepreupload");
    }); 

<后台>

@RequestMapping("/uploadingFile")

    @ResponseBody
    public Map uploadFile(MultipartFile myfile,HttpServletRequest request,
HttpServletResponse response)
            throws IllegalStateException, IOException {
        // 原始名称
        String oldFileName = myfile.getOriginalFilename(); // 获取上传文件的原名
        //获取服务器指定文件存取路径   
        String savedDir = request.getSession().getServletContext().getRealPath("");
        savedDir=savedDir.substring(0,savedDir.lastIndexOf("\\"));
        savedDir+=ConstantConfiguration.logoimgUrl;
        //获取36位的 UUID.randomUUID()
        // 上传图片
        if (myfile != null && oldFileName != null && oldFileName.length() > 0) {
            // 新的图片名称
            String newFileName = this.getDateFormat() + oldFileName.substring(oldFileName.lastIndexOf("."));
            // 新图片
            File newFile = new File(savedDir + "\\" + newFileName);
            // 将内存中的数据写入磁盘
            myfile.transferTo(newFile);
            // 将新图片名称返回到前端
            Map map = new HashMap();
            File f = new File(this.getClass().getResource("/").getPath()); 
            System.out.println("f "+Thread.currentThread().getContextClassLoader().getResource(".").getPath() );
            map.put("success", "成功啦");
            int i = newFile.toString().indexOf("webapps");
            String url = newFile.toString().substring(i+8, newFile.toString().length());
            System.out.println(url);
            map.put("url", url);
            return map;
        } else {
            Map map = new HashMap();
            map.put("error", "图片不合法");
            return map;
        }
    }