Bootstrap FileInput.js + springmvc uploadFile

下载FileInput.js

    

    http://plugins.krajee.com/file-input/demo

    https://github.com/kartik-v/bootstrap-fileinput

 

页面代码

添加FileInput JS/CSS

<form enctype="multipart/form-data" id="uploadForm">

    <div id="uploadFileDiv" hidden="true" style="width: 60%;">

        <input id="pdFile" name="file" type="file">

        <div id="fileError" class="help-block"></div>

        <br />

    </div>

</form>

添加JS

    $("#pdFile").fileinput({

        showPreview : false,

        allowedFileExtensions : [ "zip", "bar", "bpmn", "bpmn20.xml" ], 限制文件类型

        elErrorContainer : "#fileError",

        browseClass : "btn btn-success",

        browseLabel : "查找文件",

        browseIcon : '<i class="glyphicon glyphicon-search"></i>',

        removeClass : "btn btn-danger",

        removeLabel : "删除",

        removeIcon : '<i class="glyphicon glyphicon-trash"></i>',

        uploadClass : "btn btn-info",

        uploadLabel : "部署",

        uploadIcon : '<i class="glyphicon glyphicon-upload"></i>',

    });

 

    $("#uploadForm").submit(function(event) {

        var formData = new FormData(this); 这里用的是this，如果是Form的话需要Form[0]

        event.preventDefault(); 阻止当前提交事件，自行实现，否则会跳转

        var grid = $('[data-role="pdGrid"]');

        $.ajax({

            url : contextPath + '/activiti/pd/upload.koala',

            type : 'POST',

            data : formData,

            contentType : false, 这两个参数需要被定义，否则报错

            processData : false,

            success : function(data) {

                if (data.result == 'success') {

                    grid.message({

                        type : 'success',

                        content : '部署成功'

                    });

                    $("#uploadFileDiv").slideToggle("slow");

                    grid.grid('refresh');

                } else {

                    grid.message({

                        type : 'error',

                        content : data.result

                    });

                }

            },

            error : function() {

                grid.message({

                    type : 'error',

                    content : '部署失败'

                });

            }

        });

    });

 

后台代码

    @ResponseBody

    @RequestMapping("/upload")

    public Map<String, Object> uploadFile(@RequestParam MultipartFile file)

    {

        Map<String, Object> dataMap = Maps.newHashMap();

        String fileName = file.getOriginalFilename();

        try

        {

            InputStream fileInputStream = file.getInputStream();

XXXXXXXXXXXXXX

        } catch (Exception e)

        {

            dataMap.put("result", "部署流程时发生错误");

            e.printStackTrace();

        }

        dataMap.put("result", "success");

        return dataMap;

    }

 

Spring.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

 

运行效果

 

 

 

点击【部署】，实现无刷新提交form，并且刷新当前页的效果