用AJAX异步提交表单上传多个文件（type=‘file‘）案例

因为在框架中上传文件时不适合直接用form提交，因为这样会刷新页面。我们一般会用ajax进行异步上传。此方法可上传多种类型文件。

html代码：

    

        

            

                

                    
                        ×
                    
                    

                        培训产品上传
                    
                
                

                    

 
                        

 
                            上传培训产品
 
                            
                            
                        
                    
                
                

                    关闭
                    
                    
                        确定
                    
                
            
        
    

 js:

function uploadTrainProduct(){
    var formData = new FormData($("#form1")[0]);  //重点：要用这种方法接收表单的参数
    $.ajax({
        url : "/it/orderManage/uploadTrainProduct",
        type : 'POST',
        data : formData,
        // 告诉jQuery不要去处理发送的数据
        processData : false,                 
        // 告诉jQuery不要去设置Content-Type请求头
        contentType : false,
        async : false,
        success : function(data) {
            if(data){
            }
        }
    });
}

controller：

application/json 这个跟提交的content/type 一直否则报 406 错误，并且@ResponseBody 对应返回类型为String 或者 Object 简单类型，否则也报406错误。

@RequestMapping(value = "/uploadTrainProduct", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
    @ResponseBody
    public String uploadTrainProduct(
            @RequestParam(value = "file") MultipartFile[] files,  //这样接收文件
            @RequestParam(value = "id") String id,            //接收其他参数
            @RequestParam(value = "content") String content,
            HttpServletRequest request
    ) {
        try {
            for (MultipartFile file : files) {    //循环保存文件
                uploadFile(file, request);
            }
            // 返回前台
            return "success";
 
        } catch (Exception e) {
            e.printStackTrace();
            return "fail";
        }
 
    }
 
    public String uploadFile(MultipartFile file, HttpServletRequest request) throws IOException {
        String fileName = file.getOriginalFilename();
        String path="d:/images/m2";            //设置文件保存路径
//        File tempFile = new File(path, new Date().getTime() + String.valueOf(fileName));
        File tempFile = new File(path, String.valueOf(fileName));
        if (!tempFile.getParentFile().exists()) {    //创建文件夹
            tempFile.getParentFile().mkdir();
        }
        if (!tempFile.exists()) {
            tempFile.createNewFile();
        }
        file.transferTo(tempFile);
        return "images/" + tempFile.getName();
    }

这个案例也可以演变为一个表单上，一个选择图片，一个选择视频的需求。

public Boolean uploadTrainProduct(
            @RequestParam(value = "a_name") String name,                  //参数名称
            @RequestParam(value = "textfield") String textfield,          //图片文件名称
            @RequestParam(value = "file") MultipartFile imageFile,        //图片文件二进制
            @RequestParam(value = "videofield") String videofield,        //视频文件名称
            @RequestParam(value = "videofile") MultipartFile videoFile,   //视频文件二进制
            HttpServletRequest request
    ) {
        return ture;
}

结束