使用ajaxSubmit()上传form文件，并实现阻止页面跳转

使用ajaxSubmit()上传form文件，并实现阻止页面跳转

引用到的文件

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.form.js"></script>

1.dom

<form id ="modelform" method="post" enctype="multipart/form-data" >
    <input type="file" name="file"  id="fileField"> 
    <button class="allBtn" id="submitAttachment" onclick="return uploadAttachment()">上传</button>
</form>

注意：想要上传文件须在表单中加上enctype=”multipart/form-data”；

enctype=”multipart/form-data”，设置表单的MIME编码，将form里面的值以2进制的方式传过去。默认情况的编码格式为”application/x-www-form-urlencoded”。

2.js

function uploadAttachment(){
    $("#modelform").ajaxSubmit({  
        type:'post',  
        url:url, 
        dataType : "json",
        success:function(data){
            alert("保存成功！"); 
        }
    });
    return false;//阻止页面跳转
}
</form>

注意：想要阻止页面跳转须在方法后面加上return false。

3.controller

    @RequestMapping(value = "/fileUpload", method = RequestMethod.POST)
    @ResponseBody
    public JsonMessage<String> fileUpload(@RequestParam("file") MultipartFile file, HttpServletRequest requget) {   
    JsonMessage<String> message = new JsonMessage<String>();    
        try{
            ......
            message.setStatus(0);
            message.setData("上传成功");            
            return message;
        }catch(Exception e){
            e.printStackTrace();
            logger.error("上传附件异常" + e.getMessage());
            message.setStatus(500);
            message.setData("上传失败");
        }   
        return message;
    }