文件上传
前端表单：
用户通过一个包含的HTML表单选择要上传的文件。表单通常使用
@RequestMapping("/uploadFile")
public String fileUpload(MultipartFile file) throws IOException {
// 定义文件存储的根路径
String realPath = "D:\\web\\springCloud\\lhqDemo\\src\\upload";
// 创建File对象，指向根路径
File uploadDir = new File(realPath);
// 检查目录是否存在，如果不存在则创建
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
// 获取上传的文件名称
String fileName = file.getOriginalFilename();
// 生成新的文件名，使用UUID确保唯一性
fileName = UUID.randomUUID().toString() + "_" + fileName;
// 创建新的File对象，包含文件的完整路径
File newFile = new File(uploadDir, fileName);
// 将上传的文件数据写入到服务器的文件中
file.transferTo(newFile);
return "index";
}
1. 前端页面中的name名称需要与控制器参数MultipartFile对象名称一致，也可以用@RequestParam注解来进行协调 。
2.前端页面中的form表单需要指定提交类型为文件类型enctype="multipart/form-data"。
二.多文件上传
多文件上传
//多文件上传
@RequestMapping("/uploadFile1")
@ResponseBody
public String fileUpload1(MultipartFile file[],String username) throws IOException {
String realPath = "D:\\web\\springCloud\\lhqDemo\\src\\upload1";
File uploadDir = new File(realPath);
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
//上面一样，需要遍历进行文件上传
for (MultipartFile multipartFile : file) {
String fileName = multipartFile.getOriginalFilename();
fileName = UUID.randomUUID().toString() + "_" + fileName;
File newFile = new File(uploadDir, fileName);
multipartFile.transferTo(newFile);
}
return username;
}
1.多文件上传的前端页面中要注意两个文件的name属性名称需要一样。
2.控制器层的代码基本与上面的一致，只不过这里需要一个一个for循环遍历文件对象，循环的内容都一样。
三.异步上传
//异步文件上传
@RequestMapping("/asynchronousUpload")
@ResponseBody
public String asynchronous(MultipartFile file, HttpServletRequest request) throws IOException {
//需要在服务器内部创建一个保存文件的文件夹
String realpath =request.getServletContext().getRealPath("/uploadAsync");
System.out.println(realpath);
File uploadDir = new File(realpath);
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
String fileName = file.getOriginalFilename();
fileName = UUID.randomUUID().toString() + "_" + fileName;
File newFile = new File(uploadDir, fileName);
file.transferTo(newFile);
//返回文件路径
//在文件夹里是看不到图片的，在服务器里面
//文件访问：返回的路径是相对于Web应用程序根目录的，这意味着你可以通过这个路径直接在浏览器中访问上传的文件。
return "/uploadAsync/"+fileName;
}
1.异步上传：异步上传是一种在计算机编程中常用的技术，特别是在处理文件上传时。它允许用户在上传文件的同时继续进行其他操作，而不是等待文件上传完成。
2.需要用到这两个js文件，大家自行去下载合适的版本即可
执行流程：
页面加载完成后，等待用户点击ID为btn的按钮。用户点击按钮后，触发事件，执行绑定的函数。函数执行，使用ajaxSubmit方法异步提交ID为ajaxForm的表单。表单数据被发送到/upload/asynchronousUpload。服务器处理请求并返回响应数据。如果请求成功，执行success回调函数，弹出包含响应数据的警告框，并更新页面上的图片元素的src属性为服务器返回的图片URL。
详细解释：
$(document).ready(function () {...})：这是一个jQuery函数，它确保在文档完全加载和解析完成后再执行内部的函数。这意味着所有的DOM元素都已经就绪，可以被安全地访问和操作。
$('#btn').click(function (){...})：这行代码为ID为btn的元素（通常是按钮）绑定了一个点击事件。当用户点击这个按钮时，会执行花括号内的函数。
$('#ajaxForm').ajaxSubmit({...})：这是jQuery插件ajaxSubmit的调用，它允许你以异步方式提交表单。ajaxSubmit是jquery.form.js插件提供的一个方法，它封装了原生的XMLHttpRequest对象，使得异步提交表单更加简单。
url:'/upload/asynchronousUpload'：这是异步请求的目标URL，表单数据将被发送到这个地址。
type:'post'：这指定了HTTP请求的类型，这里是POST方法，意味着数据将被包含在请求体中发送。
success:function (data){...}：这是一个回调函数，当异步请求成功完成时执行。这里的data参数包含了服务器响应的数据。
alert(data)：在请求成功后，弹出一个包含服务器响应数据的警告框。这通常用于调试，以查看服务器返回的数据。
$("#img").attr('src',data);：这行代码将页面上ID为img的元素（通常是标签）的src属性设置为服务器返回的数据。这意味着如果服务器返回了一个图片的URL，那么这个URL将被用来更新图片的源地址，从而在页面上显示新图片。
四，完整代码与目录结构以及运行截图
package com.cloud.lhqdemo.controller;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
@Controller
@SuppressWarnings("all")
@RequestMapping("/upload")
public class UploadController {
//单文件上传
@RequestMapping("/uploadFile")
public String fileUpload( MultipartFile file) throws IOException {
// 定义文件存储的根路径
String realPath = "D:\\web\\springCloud\\lhqDemo\\src\\upload";
// 创建File对象，指向根路径
File uploadDir = new File(realPath);
// 检查目录是否存在，如果不存在则创建
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
// 获取上传的文件名称
String fileName = file.getOriginalFilename();
// 生成新的文件名，使用UUID确保唯一性
fileName = UUID.randomUUID().toString() + "_" + fileName;
// 创建新的File对象，包含文件的完整路径
File newFile = new File(uploadDir, fileName);
// 将上传的文件数据写入到服务器的文件中
file.transferTo(newFile);
// 返回重定向指令，通常用于防止表单重复提交
return "index";
}
//多文件上传
@RequestMapping("/uploadFile1")
@ResponseBody
public String fileUpload1(MultipartFile file[],String username) throws IOException {
String realPath = "D:\\web\\springCloud\\lhqDemo\\src\\upload1";
File uploadDir = new File(realPath);
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
//上面一样，需要遍历进行文件上传
for (MultipartFile multipartFile : file) {
String fileName = multipartFile.getOriginalFilename();
fileName = UUID.randomUUID().toString() + "_" + fileName;
File newFile = new File(uploadDir, fileName);
multipartFile.transferTo(newFile);
}
return username;
}
//异步文件上传
@RequestMapping("/asynchronousUpload")
@ResponseBody
public String asynchronous(MultipartFile file, HttpServletRequest request) throws IOException {
//需要在服务器内部创建一个保存文件的文件夹
String realpath =request.getServletContext().getRealPath("/uploadAsync");
System.out.println(realpath);
File uploadDir = new File(realpath);
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
String fileName = file.getOriginalFilename();
fileName = UUID.randomUUID().toString() + "_" + fileName;
File newFile = new File(uploadDir, fileName);
file.transferTo(newFile);
//返回文件路径
//在文件夹里是看不到图片的，在服务器里面
//文件访问：返回的路径是相对于Web应用程序根目录的，这意味着你可以通过这个路径直接在浏览器中访问上传的文件。
return "/uploadAsync/"+fileName;
}
}
1.单文件上传
2.多文件上传
3.异步上传
最后，宝子们有什么不懂的或者更好的可以评论出来或者私信我，咱们一起进步哦！感谢大家的支持，留下一个关注吧。