SpringMVC 通过ajax 实现文件上传的步骤

 更新时间:2025年05月26日 09:31:05   作者:我是大头鸟  
使用form表单在springmvc 项目中上传文件,文件上传成功之后往往会跳转到其他的页面,但是有的时候,文件上传成功的同时,并不需要进行页面的跳转,可以通过ajax来实现文件的上传,下面给大家介绍SpringMVC 通过ajax 实现文件上传的步骤,感兴趣的朋友一起看看吧

使用form表单在springmvc 项目中上传文件,文件上传成功之后往往会跳转到其他的页面。但是有的时候,文件上传成功的同时,并不需要进行页面的跳转,可以通过ajax来实现文件的上传

下面我们来看看如何来实现:

方式1:前台从dom对象中获取到文件,并且将文件解析为Blob ,我们来看看页面代码:

<input type="file" class="inputPic" />

  javascript代码:

$(".inputPic").change(function() {
		var serviceUrl = "http://localhost:8070/file/";
		var url = serviceUrl + "/upload_aj";
		var form = new FormData();
		var file=$(".inputPic")[0].files;
		console.log(file[0].name)
		form.append("myfile", new Blob(file));
		form.append("filename", file[0].name);
		var xhr = new XMLHttpRequest(); 
		xhr.open("post", url, true); // po
		xhr.upload.onloadstart = function() {// 上传开始执行方法
			ot = new Date().getTime(); // 设置上传开始时间
			oloaded = 0;// 设置上传开始时,以上传的文件大小为0
		};
		xhr.send(form); // 开始上传,发送form数据
		xhr.responseText = function(res) {
			console.log(res);
		}
		xhr.onreadystatechange = function(response) {
			console.log(response);
			if (response.target.readyState == '4') {
				var result = JSON.parse(response.target.response);
				console.log(result)
				if (Number(result.data) == 0) {
					alert(result.msg);
				} else {
					alert("图片上传成功");
				}
			}
		}
	});
	</script>

后台:

@ResponseBody
	@RequestMapping(value = "upload_aj", method = RequestMethod.POST)
	public Map<String, Object> upload_aj(HttpServletRequest request, @RequestParam("myfile") MultipartFile file) {
		try {
			String filename=request.getParameter("filename");
			byte[] bytes = file.getBytes();
			System.out.println(filename);
			Path path = Paths.get("保存路径/"+filename);
			Files.write(path, bytes);
		} catch (Exception e) {
			e.printStackTrace();
		}
		Map<String, Object> map = new HashMap<>();
		map.put("msg", "文件上传成功");
		map.put("code", "0000");
		return map;
	}

方式2:前端将文件转换为base64,然后上传到后台:

前端代码:

<input type="file" class="inputPic" />

javascript代码:

$(".inputPic").change(function() {
		var serviceUrl = "http://localhost:8070/file/";
		var url = serviceUrl + "/upload_aj";
		var form = new FormData();
		var file=$(".inputPic")[0].files;
		console.log(file[0].name)
		form.append("myfile", new Blob(file));
		form.append("filename", file[0].name);
		var xhr = new XMLHttpRequest(); 
		xhr.open("post", url, true); // po
		xhr.upload.onloadstart = function() {// 上传开始执行方法
			ot = new Date().getTime(); // 设置上传开始时间
			oloaded = 0;// 设置上传开始时,以上传的文件大小为0
		};
		xhr.send(form); // 开始上传,发送form数据
		xhr.responseText = function(res) {
			console.log(res);
		}
		xhr.onreadystatechange = function(response) {
			console.log(response);
			if (response.target.readyState == '4') {
				var result = JSON.parse(response.target.response);
				console.log(result)
				if (Number(result.data) == 0) {
					alert(result.msg);
				} else {
					alert("图片上传成功");
				}
			}
		}
	});

后端代码:

@ResponseBody
	@RequestMapping(value = "upload_base", method = RequestMethod.POST)
	public Map<String, Object> upload_base(@RequestBody Map<String,Object> reqMap){
		try {
			String filename=reqMap.get("filename")+"";
			String filestr=reqMap.get("filestr")+"";
			System.out.println(filestr);	
			Base64FileConverter.decodeBase64ToFile(filestr,"C:\\upload/"+filename);
		} catch (Exception e) {
			e.printStackTrace();
		}
		Map<String, Object> map = new HashMap<>();
		map.put("msg", "文件上传成功");
		map.put("code", "0000");
		return map;
	}

 工具类:

import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.Base64;
public class Base64FileConverter {
	  /**
     * 将 Base64 字符串解码并写入文件
     * @param base64String 包含文件数据的 Base64 字符串
     * @param outputFilePath 输出文件的路径
     * @throws IOException 如果文件操作出错
     */
    public static void decodeBase64ToFile(String base64String, String outputFilePath) throws IOException {
        // 检查 Base64 字符串是否包含 MIME 类型前缀(如 data:image/jpeg;base64,)
        String pureBase64 = base64String;
        int commaIndex = base64String.indexOf(',');
        if (commaIndex > 0) {
            pureBase64 = base64String.substring(commaIndex + 1);
        }
        // 解码 Base64 字符串
        byte[] fileData = Base64.getDecoder().decode(pureBase64);
        // 写入文件
        try (FileOutputStream fos = new FileOutputStream(outputFilePath)) {
            fos.write(fileData);
            System.out.println("文件已成功写入: " + outputFilePath);
        }
    }
    /**
     * 将文件编码为 Base64 字符串
     * @param filePath 文件路径
     * @return 文件的 Base64 编码字符串
     * @throws IOException 如果文件操作出错
     */
    public static String encodeFileToBase64(String filePath) throws IOException {
        byte[] fileData = Files.readAllBytes(Paths.get(filePath));
        return Base64.getEncoder().encodeToString(fileData);
    }
}

上面就是对文件上传的通过ajax来实现的步骤,希望对你有所帮助

到此这篇关于SpringMVC 通过ajax 实现文件的上传的文章就介绍到这了,更多相关SpringMVC ajax 文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Spring Data JDBC介绍及实现代码

    Spring Data JDBC介绍及实现代码

    这篇文章主要介绍了Spring Data JDBC介绍及实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Java中 % 与Math.floorMod() 区别详解

    Java中 % 与Math.floorMod() 区别详解

    这篇文章主要介绍了Java中 % 与Math.floorMod() 区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 使用Spring Boot实现操作数据库的接口的过程

    使用Spring Boot实现操作数据库的接口的过程

    本文给大家分享使用Spring Boot实现操作数据库的接口的过程,包括springboot原理解析及实例代码详解,感兴趣的朋友跟随小编一起看看吧
    2021-07-07
  • 详解Java利用同步块synchronized()保证并发安全

    详解Java利用同步块synchronized()保证并发安全

    这篇文章主要介绍了Java利用同步块synchronized()保证并发安全,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • SpringBoot参数校验:@Valid与@Validated使用详解

    SpringBoot参数校验:@Valid与@Validated使用详解

    这篇文章主要介绍了SpringBoot参数校验:@Valid与@Validated使用详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • Java JFinal框架中实现添加定时任务功能详解

    Java JFinal框架中实现添加定时任务功能详解

    这篇文章主要为大家详细介绍了如何在JFinal框架项目中添加定时任务的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-02-02
  • Spring中的@Aspect注解使用详解

    Spring中的@Aspect注解使用详解

    这篇文章主要介绍了Spring中的@Aspect注解使用详解,利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高了开发的效率,需要的朋友可以参考下
    2024-01-01
  • Springboot+AOP实现返回数据提示语国际化的示例代码

    Springboot+AOP实现返回数据提示语国际化的示例代码

    这篇文章主要介绍了Springboot+AOP实现返回数据提示语国际化的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07
  • Java实现MapStruct对象转换的示例代码

    Java实现MapStruct对象转换的示例代码

    本文主要介绍了MapStruct在Java中的对象转换使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-12-12
  • SpringBoot详细讲解多个配置文件的配置流程

    SpringBoot详细讲解多个配置文件的配置流程

    SpringBoot项目是一个标准的Maven项目,它的配置文件需要放在src/main/resources/下,其文件名必须为application,其存在两种文件形式,分别是properties和yaml(或者yml)文件
    2022-06-06

最新评论