自定义前端文件上传

展示部分

<form style="display:none;" id="form-upload" method="post" enctype="multipart/form-data" action="/test/upload">
    <input type="hidden"  name="id" value="123">
    <input type="file" name="file">
</form>
<button class="btn-upload" id="btn-upload" >上传</button>

js事件绑定

<script type="text/javascript">
(function(){
    // 劫持上传按钮点击事件，以做到文件上传自定义的目的
    var objBtnFileUpload = $("#form-upload").find("input[type='file']");
    $("btn-upload").click(function(){
        objBtnFileUpload.trigger("click");
    });
    // 文件上传完成，input[type='file']改变，触发上传
    objBtnFileUpload.change(function() {
            var self = $(this);
            var form = self.parent("form");
            var formData = new FormData(form[0]);//用这种方式获取值可以不触发页面跳转
            $.ajax({
                type : form.attr('method'),
                url : form.attr('action'),
                data : formData,
                mimeType : form.attr('enctype'),
                contentType : false,
                cache : false,
                processData : false
            }).success(function(ret) {
                console.log(ret);
                alert("上传成功");
            }).fail(function(jqXHR, textStatus, errorThrown) {
                //错误信息
                console.log(jqXHR);
                alert("上传失败！");
            });
        });
    }
})();
</script>

后台处理

/**
 * <p>上传后台</p>
 * */
@RequestMapping(value = "/test/upload", method = RequestMethod.POST)
@ResponseBody
public String addFillForm(@RequestParam("file") MultipartFile file,HttpServletRequest request) {
    String id = request.getParameter("id");//额外的表单参数可以通过这种方式接收
    byte[] bFile = file.getBytes();
    String strFileName = file.getName();
    //业务逻辑

    return "上传成功";
}