Fileinput手动文件上传实例（前端+后端）

HTML

<form class="form-horizontal" id="form_upload" enctype="multipart/form-data" accept-charset="UTF-8" method="post">
    <input id="fileinputdemo_text01" type="file" multiple="multiple" name="file"/>
    <input type="button" id="upload_request" class="btn btn-default" value="upload_request"/>
</form>

其中，multiple="multiple" 是标记为可以选择多个文件上传。
使用bootstrap-fileinput也好用其他UI框架封装的上传组件也好，都一样。最终都是<input type="file"。

JS

$("#upload_request").on("click", function (eve) {
    // 获取表单数据
    var formData = new FormData($("#form_upload")[0]);// 重点
    // form_data.append("file",$("input[name='file']")[0].files[0]); // 手动获取文件
    // ajax提交数据，与后台进行交互
    $.ajax({
        type: "post",
        url: "http://127.0.0.1:8080/test-web/app/test/upload_request",
        data: formData,
        dataType: "json",
        contentType: false,// 重点
        processData: false,// 重点
        success: function (result) {
            console.log("--------upload_request------");
        }
    });
});

ajax提交代文件流的form表单，一定要设置 contentType: false和processData: false。

Controller

@RequestMapping(method = RequestMethod.POST, path = "upload_request", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResultVO upload_request(ErpContractTemplate erpContractTemplate, @RequestPart(value = "file") MultipartFile file) {
    ResultVO resultVO = new ResultVO();
    try {
        if (file != null && file.getSize() > 0) {
		// todo
        }
        resultVO.setCode(StatusCode.STATUS_1);
        resultVO.setMsg(StatusCode.MSG_1);
    } catch (Exception e) {
        e.printStackTrace();
        resultVO.setCode(StatusCode.STATUS_0);
        resultVO.setMsg(StatusCode.MSG_0);
    }
    return resultVO;
}

@RequestPart(value = "file") value的值对应form表单中的建值，默认是html标签的name，也可以手动设置通过append拼接。
MultipartFile的具体用法在此不具体说明，自己查查吧。