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 Elasticsearch 5.0.x修改数据后无法立即刷新解决方法示例

    Spring Data Elasticsearch 5.0.x修改数据后无法立即刷新解决方法示例

    这篇文章主要为大家介绍了Spring Data Elasticsearch 5.0.x修改数据后无法立即刷新解决方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Nacos快速安装部署教程

    Nacos快速安装部署教程

    文章简要介绍Nacos作为阿里巴巴开源的微服务管理组件,涵盖其核心功能及单机模式部署步骤:下载稳定版、配置MySQL、执行数据库脚本、启动服务并查看日志,最后通过指定地址和账号登录控制台
    2025-07-07
  • dubbo扩展点AOP切面功能扩展示例详解

    dubbo扩展点AOP切面功能扩展示例详解

    这篇文章主要为大家介绍了dubbo扩展点AOP切面功能扩展示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Java的字符串常量池StringTable详解

    Java的字符串常量池StringTable详解

    这篇文章主要介绍了Java的字符串常量池StringTable详解,JVM为了提高性能和减少内存开销,在实例化字符串常量的时候进行了一些优化,为 了减少在JVM中创建的字符串的数量,字符串类维护了一个字符串池,需要的朋友可以参考下
    2023-11-11
  • java利用delayedQueue实现本地的延迟队列

    java利用delayedQueue实现本地的延迟队列

    这篇文章主要给大家介绍了java利用delayedQueue实现本地的延迟队列的相关资料,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • java实现简单的扫雷小游戏

    java实现简单的扫雷小游戏

    这篇文章主要为大家详细介绍了java实现简单的扫雷小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Spring中@Service注解的作用与@Controller和@RestController之间区别

    Spring中@Service注解的作用与@Controller和@RestController之间区别

    这篇文章主要介绍了Spring中@Service注解的作用与@Controller和@RestController之间的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-03-03
  • Mybatis Plus插件三种方式的逆向工程的使用

    Mybatis Plus插件三种方式的逆向工程的使用

    这篇文章主要介绍了Mybatis Plus插件三种方式的逆向工程的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Mybatis实现一对一查询映射处理

    Mybatis实现一对一查询映射处理

    MyBatis是一种流行的Java持久化框架,它提供了灵活而强大的查询映射功能,本文主要介绍了Mybatis实现一对一查询映射处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • java编译时与运行时概念与实例详解

    java编译时与运行时概念与实例详解

    本篇文章通过实例对 java程序编译时与运行时进行了详解,需要的朋友可以参考下
    2017-04-04

最新评论