当前位置：首页 > news >正文

SpringMVC 通过ajax 实现文件的上传

news 来源：原创 2025/7/5 8:52:19

使用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); // poxhr.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); // poxhr.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 实现文件的上传

使用form表单在springmvc 项目中上传文件，文件上传成功之后往往会跳转到其他的页面。但是有的时候，文件上传成功的同时，并不需要进行页面的跳转，可以通过ajax来实现文件的上传下面我们来看看如何来实现： 方式1&…...

编程日记 2025/7/5 8:52:19

图片识别（TransFormerCNNMLP）

目录一、Transformer （一）ViT：Transformer 引入计算机视觉的里程碑 （二）Swin-Transformer：借鉴卷积改进 ViT （三）VAN：使用卷积模仿 ViT （四）…...

编程日记 2025/6/27 23:14:12

手术机器人行业新趋势：Kinova多机械臂协同系统如何突破复杂场景适应性瓶颈？

机器人手术历经多阶段技术演进，已成为现代医疗重要方向。其需求增长源于医疗机构对高精度低风险手术方案的需求、微创手术普及及技术进步带来的复杂场景适应性提升。Kinova 轻型机械臂凭借模块化设计与即插即用功能，可快速适配不同手术环境，为…...

编程日记 2025/6/27 22:56:46

国酒华夏实业酒水供应链：全品类覆盖打造一站式购销平台

在消费升级与供应链效率双重驱动的酒水行业变革中，国酒华夏实业凭借全品类覆盖与数字化赋能，构建起集采购、品鉴、文化传播于一体的新型酒水供应链体系。其“一站式购销平台”模式不仅重塑了传统酒水流通链路，更通过精准服务与品质保障&#…...

编程日记 2025/6/27 22:56:37

【Qt】：设置hover属性，没有适应到子控件中

#ButtonStyle:hover 是一个 ID 选择器，仅对设置了 objectName"ButtonStyle" 的控件本身生效，不会自动应用到其子控件（如 QLabel 和 QWidget）。在ButtonForm中，有一个Qwidget控件，在这个Qwidget中…...

编程日记 2025/6/27 22:56:40

缺乏经验的 PCB 过孔建模方法

您是一名背板设计人员，被指派设计一种新的高速、多千兆位串行链路架构，从多个线卡到背板上的多个交换矩阵交换卡。这些链路必须在第一天以 6GB/s 的速度运行，并且为 10GB/s （IEEE 802.3KR）做好产品演进的准备。时间表很紧，您需要提出一个背板架构，以允许程序的其余部分…...

编程日记 2025/7/5 8:29:50

搭建人工智能RAG知识库的主流平台与特点概述

在2022年末chatgpt和2024年末deepseek的推动下，人工智能应用如雨后春笋，层出不穷，日新月异。现推荐一些截至目前比较主流的用来搭建RAG的平台。 1. Haystack 特点： 模块化架构：支持端到端问答系统构建，集…...

编程日记 2025/7/4 21:07:44

【QT】在界面A打开界面B时，界面A隐藏，界面B关闭时，界面A复现

在Qt6中，可以通过信号与槽机制实现界面A在关闭界面B时重新显示。以下是具体的实现步骤： 方法一：使用自定义关闭信号在界面B中定义关闭信号：当界面B关闭时发射该信号。连接信号到界面A的显示槽：在界面A中创建界面B时…...

编程日记 2025/7/5 7:58:42

捡漏岗位：国考报名数据和岗位特征分析

2025 年国考官方数据及权威分析，报录比低于 10:1 的岗位主要集中在中西部艰苦边远地区、特殊专业技术岗位及定向招录岗位。岗位名称招录机关地区招录人数报名人数报录比报考条件示例一级警长及以下（三）新疆出入境边防检查总站新疆3124:1男性…...

编程日记 2025/7/5 8:49:46

qt---命名规范

1、命名规范 1) 类名：单词首字母大写，单词和单词之间直接连接，无需连接字符如：MyClass，QPushButton class MainWindow { };2) Qt中内置的类型，头文件和类命名同名。如： #include <QStri…...

编程日记 2025/6/27 23:39:40

信息系统项目管理师考前练习3

项目组合管理企业战略调整后，项目组合经理应优先： A. 终止所有不符合新战略的项目 B. 重新评估项目优先级与资源分配 C. 要求所有项目加快交付进度 D. 合并相似项目以减少成本答案：B 解析：项目组合管理的核心是动态对齐战略，优先重新评估项目价值与资源匹配（第5版强调…...

编程日记 2025/7/5 7:40:22

【算法创新+设计】灰狼算法GWO+扰动算子，求解大规模TSP问题利器

目录 1.灰狼算法GWO原理2.连续空间到离散空间3.核心公式处理4.结果展示5.代码获取6.读者交流 1.灰狼算法GWO原理【智能算法】灰狼算法（GWO）原理及实现 2.连续空间到离散空间 GWO算法是针对连续空间问题设计的优化方法，而旅行商问题&#…...

编程日记 2025/6/27 22:56:33

GPU P-State 模式说明

在 NVIDIA GPU 上，“P-State”（Performance State）用来表示显卡当前的性能／功耗等级，P0 代表最高性能（最高核心频率、最大功耗），数字越大性能越低、功耗越小。不同 P-State 的主要区…...

编程日记 2025/7/5 5:29:13

真实世界中的贝叶斯网络：Bootstrap、模型平均与非齐次动态的科研应用

在生态与环境科学领域，揭示变量间因果机制是理解复杂系统运行规律的核心挑战。传统实验方法受限于高昂成本与生态扰动风险，而经典统计模型仅能刻画变量相关性，难以突破"相关非因果"的认知瓶颈。贝叶斯网络作为融合图论与概率论的前…...

编程日记 2025/7/5 6:59:38

.NET外挂系列：4. harmony 中补丁参数的有趣玩法（上）

一：背景 1. 讲故事前面几篇我们说完了 harmony 的几个注入点，这篇我们聚焦注入点可接收的几类参数的解读，非常有意思，在.NET高级调试视角下也是非常重要的，到底是哪些参数，用一张表格整理如下&#xff…...

编程日记 2025/7/4 11:09:54

【VLNs篇】03：VLMnav-端到端导航与视觉语言模型：将空间推理转化为问答

栏目内容论文标题End-to-End Navigation with Vision-Language Models: Transforming Spatial Reasoning into Question-Answering (端到端导航与视觉语言模型：将空间推理转化为问答)核心问题如何利用大型视觉语言模型（VLM）实现端到端的机器人…...

编程日记 2025/6/27 23:29:14

云原生攻防4（Kubernetes基础补充）

什么是K8S？ Kubernetes 是做什么的？什么是 Docker？什么是容器编排？ Kubernetes 一词来自希腊语，意思是“飞行员”或“舵手”。这个名字很贴切，Kubernetes 可以帮助你在波涛汹涌的容器海洋中航行。 Kubernetes 是 Google 基于 Borg 开源的容器编排调度引擎，作为 CNCF最…...

编程日记 2025/6/27 23:20:55

redis--redisJava客户端：Jedis详解

在Redis官网中提供了各种语言的客户端，地址： https://redis.io/docs/latest/develop/clients/ Jedis 以Redis命令做方法名称，学习成本低，简单实用，但是对于Jedis实例是线程不安全的（即创建一个Jedis实例&a…...

编程日记 2025/6/27 22:56:41

SpringBoot-SpringBoot源码解读

SpringBoot-SpringBoot源码解读一、Spring Boot启动过程概述 Spring Boot通过一系列的类和机制，简化了Spring应用的启动流程。当你执行SpringApplication.run()时，Spring Boot会自动完成应用的初始化、环境配置、组件加载、自动配置等任务&#xff0c…...

编程日记 2025/6/27 20:41:41

黑马程序员C++2024新版笔记第4章函数和结构体

1.结构体的基本应用结构体struct是一种用户自定义的复合数据类型，可以包含不同类型的成员。例如： struct Studet {string name;int age;string gender; } 结构体的声明定义和使用的基本语法： struct 结构体类型 {成员1类型成员1名称;成…...

编程日记 2025/7/3 21:00:06

【沉浸式求职学习day46】【华为5.7暑期机试题目讲解】

沉浸式求职学习题目1题目2 题目1 一个超大智能汽车测试场有多个充电桩，每个充电桩的位置由其在二维平面上的坐标(x,y)表示。给定一辆智能汽车的当前位置(car_x,car_y)，请设计一个高效的算法，找出给定智能汽车行驶到充电桩行驶距离最近的k个…...

编程日记 2025/6/27 22:57:12

PDF处理控件Aspose.PDF教程：以编程方式将PDF转换为Word

您是否正在寻找在线将 PDF 转换为 Word 的方法？在本指南中，我们将探索如何使用 C#、Java 和 Python 编码解决方案将 PDF 文档转换为可编辑的 Word 文件。开发人员通过代码将 PDF 文件转换为 Word 格式，从而获得显著优势。这种方法可以轻松实现…...

编程日记 2025/6/27 22:56:39

旋转位置RoPE编码详解

一. 旋转位置编码和正余弦位置编码比对旋转位置编码（RoPE）和正余弦位置编码（Sinusoidal Position Encoding）是两种常用的位置编码方法，它们在处理序列数据时具有不同的数学形式和特性。以下是对两者优劣的详细说明及…...

编程日记 2025/7/5 1:07:01

canvas（二）-动画（2d）

<canvas> 动画是通过 JavaScript 动态更新画布内容来实现的。它利用 requestAnimationFrame 方法实现平滑的动画效果，适用于游戏、数据可视化、交互式图形等场景。真的需要数据可视化等场景使用，还是直接引入外部模型还原度比较高，但同…...

编程日记 2025/7/4 16:57:37

Dynamics 365 Business Central Azure application registration

本方法适用于单租户服务器身份验证。实现方法在大多数组织里ERP Admin 不一定有权限 Azure Admin权限，在实施过程中你只需要把以下指引发给你的系统管理员。请注意后面有系统管理员设置好后，你如何检查。导航到 https://admin.microsoft.com 并登…...

编程日记 2025/7/5 6:02:35

选择合适的Azure数据库监控工具

Azure云为组织提供了众多服务，使其能够无缝运行应用程序、Web服务和服务器部署，其中包括云端数据库部署。Azure数据库能够与云应用程序实现无缝集成，具备可靠、易扩展和易管理的特性，不仅能提升数据库可用性与性能，同时…...

编程日记 2025/6/27 23:06:17

Access链接Azure SQL

Hi，大家好呀！ 最近在给大家分享了SQL Server方面的一些视频，那今天我们也来讲讲Azure SQL。什么是Azure SQL，这里我们就不介绍了，如果你没有用这个数据库，那你可以简单的把它理解成，就是SQL …...

编程日记 2025/7/4 1:12:10

34、React Server Actions深度解析

一、灵魂契约协议（核心机制） 1. 次元融合架构 "use server";async function borrowBook(bookId: number, readerName: string) {// 模拟数据库操作const result await db.execute(UPDATE books SET available false WHERE id ?,[bookId]…...

编程日记 2025/6/27 22:57:07

Azure 应用服务中的异常处理、日志记录和通知：综合指南

简介 Azure 应用服务是基于云的应用程序，使开发人员能够在云上构建、部署和管理应用程序。与任何应用程序一样，制定适当的异常处理、日志记录和通知实践至关重要，以确保应用程序平稳运行，并快速识别和解决任何问题。在本篇博文中&…...

编程日记 2025/6/27 22:57:05

第16天-使用Python Pillow库常见图像处理场景

1. 打开与显示图像 from PIL import Image# 打开图像文件 img = Image.open("input.jpg")# 显示图像基本信息 print(f"格式: {img.format}") # JPEG print(f"尺寸: {img.size}") # (宽度, 高度) print(f"模式: {img.mode}") …...

编程日记 2025/6/27 22:57:24

VUE3+TS实现图片缩放移动弹窗

完整代码使用VUE3、TS，实现将图片通过鼠标拖拽缩放以及选择缩放比例。 <template><div><el-dialogv-model"dialogVisible"title"查看图片":close-on-click-modal"false":close-on-press-escape"false"fu…...

编程日记 2025/6/27 23:10:33

关于Vue自定义组件封装的属性/事件/插槽的透传问题

// parent.vue <Myinputv-model"keyWords"placeholder"请输入内容"size"small"input"input"change"change"width"320" ><template #prepend><el-select v-model"select" placeholder&qu…...

编程日记 2025/7/4 15:48:52

智能驾驶中的深度学习：基于卷积神经网络的车道线检测

摘要智能驾驶是人工智能技术的重要应用领域之一，而车道线检测是实现自动驾驶的基础功能。本文介绍了一种基于深度学习的车道线检测方法，使用卷积神经网络（CNN）对道路图像进行实时分析。文章详细阐述了数据预处理、模型构建、训练优化及实际部署的完整流程，并提供了Pytho…...

编程日记 2025/6/27 22:56:38

在 Excel xll 自动注册操作中使用东方仙盟软件2————仙盟创梦IDE

// 获取当前工作表名称string sheetName (string)XlCall.Excel(XlCall.xlfGetDocument, 7);// 构造动态名称（例如：Sheet1!MyNamedCell）string fullName $"{sheetName}!MyNamedCell";// 获取引用并设置值var namedRange (ExcelRe…...

编程日记 2025/6/27 22:56:36

【每周一个MCP】：将pytdx封装成MCP

文章目录配置文件MCP代码（其实github上都有）不错不错，星星之火可以燎原。 https://github.com/ddholiday/onedayoneMCP/tree/main/MCPs/tdx-mcp 配置文件 pytdx有两种读取数据的方式，分别是，从API读取，和从本地读取。其中，从API读取，需要IP和端口。这个官方文档…...

编程日记 2025/6/27 22:57:45

Vue3中插槽, pinia的安装和使用(超详细教程)

1. 插槽插槽是指, 将一个组件的代码片段, 引入到另一个组件。 1.1 匿名插槽通过简单的案例来学习匿名插槽，案例说明，在父组件App.vue中导入了子组件Son1.vue，父组件引用子组件的位置添加了一个片段，比如h2标签，然…...

编程日记 2025/6/27 23:26:24

【Java高阶面经：微服务篇】5.限流实战：高并发系统流量治理全攻略

一、限流阈值的三维度计算模型 1.1 系统容量基准线：压测驱动的安全水位 1.1.1 压力测试方法论测试目标：确定系统在资源安全水位（CPU≤80%，内存≤70%，RT≤500ms）下的最大处理能力测试工具：单机压测：JMeter（模拟10万并发）、wrk（低资源消耗）集群压测：LoadRunner …...

编程日记 2025/6/27 22:57:16

学习黑客了解密码学

5分钟了解密码学：从古老艺术到现代科学 🔐 作者: 海尔辛 | 发布时间: 2025-05-21 08:36:35 UTC 密码学简介：保护信息的艺术与科学 📜 密码学是研究如何安全传递和存储信息的学科。它不仅仅是加密和解密，更包含了身份…...

编程日记 2025/6/27 22:57:00

【UE5】环形菜单教程

效果步骤 1. 下载图片资源：百度网盘请输入提取码提取码:fjjx 2. 将图片资源导入工程，如下 3. 新建3个控件蓝图，这里分别命名为“WBP_CircularMenu”、“WBP_Highlight”、“WBP_Icon” 4. 打开“WBP_Icon”，设置“所需” 添加…...

编程日记 2025/6/27 22:57:08

【JVM】学习笔记

1. JVM概述 JVM是一个抽象的计算机，用于运行Java程序。它将Java字节码转化为特定平台的机器代码，确保Java程序具有跨平台性。 2. JVM架构 JVM的架构通常包括以下几个主要部分： 类加载子系统（ClassLoader）&#xff…...

编程日记 2025/6/27 22:57:17

物流项目第五期（运费计算实现、责任链设计模式运用）

前四期： 物流项目第一期（登录业务）-CSDN博客物流项目第二期（用户端登录与双token三验证）-CSDN博客物流项目第三期（统一网关、工厂模式运用）-CSDN博客物流项目第四期（运费模板列…...

编程日记 2025/6/27 23:14:36

PrintStream PrintWriter Java 打印流

使用场景： 代替 System.out 输出日志（比如 System.setOut(printStream)）需要输出各种类型（如 println(123)、println("hello")） 常用方法： print(), println() → 支持所有基本类型和对象pr…...

编程日记 2025/6/27 23:23:26

前端excel表格解析为json，并模仿excel显示

前端环境：elementUI vue2 <style lang"scss" scoped> 页面效果 jsondata为mock数据，为方便调试其内容可清空，首行（字母坐标）随数据内容自动变化，首列也是一样，模拟excel …...

编程日记 2025/6/27 23:34:35

NumPy 2.x 完全指南【十六】分割数组

文章目录 1. 数组分割1.1 split1.2 array_split1.3 vsplit1.4 hsplit1.5 dsplit1.6 unstack 1. 数组分割数组分割是指将一个数组拆分为多个子数组的操作，常用于数据处理、并行计算、分块处理等场景。NumPy 提供了多种分割函数，允许用户沿不同方向&…...

编程日记 2025/6/27 22:57:13

vue3 + vite 使用tailwindcss

第一步：安装依赖 vite版本较低（“vite”: “^4.0.0”）所以就使用低版本的tailwindcss npm install -D tailwindcss3.4.1 postcss autoprefixer第二步：配置文件生成 npx tailwindcss init -p会自动生成两个文件postcss.config.js和…...

编程日记 2025/6/27 23:35:18

K个一组链表翻转

目录 1. 题意 2. 解题思路 3. 代码 1. 题意给一个链表，按 k 进行翻转，也就是 k 2 ，两两进行翻转，如果不够2则不动。 2. 解题思路首先思考怎么翻转一个链表，反转链表：https://leetcode.cn/problems…...

编程日记 2025/7/4 11:25:29

逆向音乐APP：Python爬虫获取音乐榜单 (1)

1. 引言在数字音乐时代，许多平台如音乐有榜单，限制非付费用户访问高音质或独家内容。然而，从技术研究的角度来看，我们可以通过逆向工程和Python爬虫技术解音乐的API接口，获取付费音乐的播放链接。 2. 技术准备在当…...

编程日记 2025/6/27 23:18:27

STM32之串口通信WIFI上云

一、W模块的原理与应用基本概念如果打算让硬件设备可以通过云服务器进行通信（数据上报/指令下发），像主流的云服务器有阿里云、腾讯云、华为云，以及其他物联网云平台：巴法云.......，硬件设备需要通过TCP…...

编程日记 2025/6/27 22:57:23

Python爬虫实战：获取天气网最近一周北京的天气数据，为日常出行做参考

1. 引言随着互联网技术的发展，气象数据的获取与分析已成为智慧城市建设的重要组成部分。天气网作为权威的气象信息发布平台，其数据具有较高的准确性和实时性。然而，人工获取和分析天气数据效率低下，无法满足用户对精细化、个性化气象服务的需求。本文设计并实现了一套完整…...

编程日记 2025/6/27 23:30:40

【Java学习笔记】main方法

main 方法一、深入理解 main 方法特变注意！！ 1. 在main()方法中，我们可以直接调用 mian 方法所在类的静态方法或静态属性 2. 不能访问该类中的非静态成员，必须创建该类的一个实例对象后，才能通过这个对象去访问类中…...

编程日记 2025/6/27 23:33:18

相关文章：