前端代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="static/js/jQuery.min.js"></script> <script> $(function(){ $("#uploadFile").click(function(){ //获取要上传的图片 var photoFile = $("#photo")[0].files[0]; if(photoFile == undefined){ alert("您还没选中文件"); return; } var formData = new FormData(); formData.append("headPhoto",photoFile); //ajax向后台发送文件 $.ajax({ type:"post",//get只能提交文本数据,而图片是二进制数据所以要用post data:formData,//要传递的数据 url:("fileUpload"), processData:false,//默认为TRUE会把传输的对象(只要不是字符串)data转化为查询字符串, // 如果要发送dom树或其他不希望转化的数据就要设置为FALSE contentType:false,//设置请求的数据为二进制类型 success:function(result){ //接收后台响应的信息 console.log(result); //图片回显 } }) }) }) </script> </head> <body> <form action="addplayer" method="get"> <p>用户名:<input type="text" name="name"></p> <p>密码:<input type="text" name="password"></p> <p>昵称:<input type="text" name="nickname"></p> <p>头像:<input type="file" id ="photo" name="photo"></p> <p><a id="uploadFile" href="javascript:void(0)">立即上传</a></p> <input type="submit" value="注册"> </form> </body> </html>
后端代码:
package com.xuqg.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.File; import java.io.IOException; import java.util.UUID; /** * @Author:xuqiangang * @Date:2021/9/23 0023 15:37 * @Description: com.xuqg.controller * @Version:1.0.0 */ @Controller public class FileUploadController { @ResponseBody @RequestMapping("/fileUpload") public String fileUpload(HttpServletRequest req , MultipartFile headPhoto) throws IOException { // 指定目标文件存储路径 String filePath = req.getServletContext().getRealPath("/upload"); // 创建图片文件存储目录 File dir = new File(filePath); if(!dir.exists()){ dir.mkdirs(); } // 获取文件名 String originalFilename = headPhoto.getOriginalFilename(); // 获取文件扩展名 String extendsName = originalFilename.substring(originalFilename.lastIndexOf(".")); // 生成UUID String uuid = UUID.randomUUID().toString(); // 创建新文件名 String newFileName = uuid.concat(extendsName); // 创建文件全路径 File file = new File(dir,newFileName); // 存储文件 headPhoto.transferTo(file); return "ok"; } }
springmvc.xml中配置上传文件的组件
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>