Spring使用ajax异步上传文件

博客已迁移到CSDN《https://blog.csdn.net/qq_33375499》

单文件上传 

<!-- 创建文件选择框 -->
文件上传 :<input type="file" id="file" name="filename" />

 

AJAX获取数据并进行上传:

// 创建formData对象，用于保存ajax上传的参数信息
 var formData = new FormData();
// 获取要上传的文件file
var files = document.getElementById("file").files;
if(files.length <= 0){
    alert("请选择文件");
    return;
}
var file = files[0];
// 将文件添加到formData对象中
formData.append("file",file);
// ajax 异步上传
$.ajax({
　　type:"post",
　　url:"upload.do",// 上传请求url
　　data:formData,// 上传参数
　　processData : false,// 必须，设置不转换为string，默认为true
　　contentType : false,
　　success:function(data){
 　　　　alert("上传成功");
　　},
　　error:function(e){
　　　　alert("上传失败");
　　}
});

 

后台数据接收action(controller)代码

第一种：使用Springmvc自带注解接收文件

@RequestMapping("upload.do")

public void upload(@RequestParam(value="file")MultipartFile file) throws Exception {// 使用RequestParam注解接收参数，value值为formData中文件对应的key值
　　// 文件名称
　　file.getOriginalFilename();

　　// 文件字节数组
　　file.getBytes();

　　...

}

第二种：用HttpServletRequest接收文件

@RequestMapping("upload.do")

public void upload() throws Exception {
　　MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;// request转换
　　MultipartFile file = multipartHttpServletRequest.getFile("file"); // 参数为fromData中文件的key值
　　// 文件名称
　　file.getOriginalFilename();

　　// 文件字节数组
　　file.getBytes();

　　...

}

　　

多文件上传

<!-- 创建文件选择框 -->
文件上传1 :<input type="file" id="file1" name="filename" />

文件上传2 :<input type="file" id="file2" name="filename" />

文件上传3 :<input type="file" id="file3" name="filename" />

 

AJAX获取数据并进行上传:

// 创建formData对象，用于保存ajax上传的参数信息
 var formData = new FormData();
// 获取要上传的文件file
var files = document.getElementsByName("filename");
for (var i = 0, len = files.length; i < len; i++){
　　var fs = files[i].files;
　　if(fs.length <= 0){
　　　　alert("请先上传文件")；
　　　　return;
　　}
　　// 将文件添加到formData对象中
　　formData.append("files",fs[0]);
}
// ajax 异步上传
$.ajax({
　　type:"post",
　　url:"upload.do",// 上传请求url
　　data:formData,// 上传参数
　　processData : false,// 必须，设置不转换为string，默认为true
　　contentType : false,
　　success:function(data){
 　　　　alert("上传成功");
　　},
　　error:function(e){
　　　　alert("上传失败");
　　}
});

　　

后台数据接收action(controller)代码

第一种：使用Springmvc自带注解接收文件

@RequestMapping("upload.do")
public void upload(@RequestParam(value="files")MultipartFile[] files) throws Exception {// 使用RequestParam注解接收参数，value值为formData中文件对应的key值
　　for(int i = 0,len = files.length; i < len; i++){
　　　　// 文件名称
　　　　files[i].getOriginalFilename();

　　　　// 文件字节数组
　　　　files[i].getBytes();
　　}
　　...
}

第二种：用HttpServletRequest接收文件

@RequestMapping("upload.do")
public void upload() throws Exception {
　　MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;// request转换
　　MultipartFile[] files = multipartHttpServletRequest.getFiles("files"); // 参数为fromData中文件的key值
　　for(int i = 0,len = files.length; i < len; i++){

　　　　// 文件名称
　　　　files[i].getOriginalFilename();

　　　　// 文件字节数组
　　　　files[i].getBytes();
　　}

　　... 
}