可以使用jquery-form外掛來實現非同步上傳檔案,請自行下載jquery-form.js

<script type="text/javascript" src="js/jquery1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery-form.js"></script>

前端程式碼如下:

<form id="ff" enctype="multipart/form-data" method="post">
    <input id="file"
 
 type="file" name="file"  multiple="multiple"/><br/>
    <input type="button" value="外掛非同步上傳" onclick="upload()"/>
</form>

js程式碼如下:

<script>
    function upload(){
        if($('#file').val() == ""){
            alert('你沒有選中檔案!');
            return ;
        }
          var
 
 options = {
                type: "post",
                 url : "upload/testAjaxUpload",
                 dataType: "text",
                 success : function(data) {
                    if(data == 'true'){
                        alert("上傳成功!");
                    }else{
                        alert("上傳失敗!"
 
);
                    }
                 }
         }; 
         //jquery-form用外掛非同步提交
          $('#ff').ajaxSubmit(options);  
    }
</script>

後臺程式碼如下：

//使用jquery-form外掛非同步上傳檔案
    @RequestMapping("/testAjaxUpload")
    @ResponseBody
    public String testAjaxUpload(
            @RequestParam(value = "file", required = false) MultipartFile file,
            HttpSession session) {
        String result = "false";
            if (file != null) {
                try{
                   String path = session.getServletContext().getRealPath("/upload/");  //獲取本地儲存路徑
                   String fileName = file.getOriginalFilename();
                   String fileType = fileName.substring(fileName.lastIndexOf(".")); //獲取字尾名
                   String newName=new Date().getTime() + fileType;
                   File file2 = new File(path,newName); //新建一個檔案
                   file.transferTo(file2);
                }catch(Exception e){
                    return "false";
                }
                result = "true";
            }
        return result;
    }