前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<div>
<input type="text" name="username" id="username">
<input type="file" name="userface" id="userface">
<button onclick="doUpload()">提交</button>
</div>
<img src="" alt="" id="myimg">
<script>
function doUpload() {
let username = $("#username").val();
let userfaceJs = $("#userface")[0];//转成js对象
let files = userfaceJs.files;
let file = files[0];
let data = new FormData();
data.append("username",username);
data.append("userface",file);
$.ajax({
url: "/file/fileupload",
type:"post",
data:data,
contentType:false, //取消数据类型自动转换
processData: false,//禁止预处理
success: function (data) {
$("#myimg").attr("src",data);
}
})
}
</script>
</body>
</html>
后端代码
package com.qfedu.demo;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
@WebServlet(urlPatterns = "/fileupload")
@MultipartConfig(location = "D:\\temp")
public class FileUploadServlet extends HttpServlet {
SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
/**
* 由于文件是二进制内容,所以上传的文件需要放在请求体中,所以文件上传都是 post 请求
*
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取用户名(文件上传请求中同时包含了其他参数)
String username = req.getParameter("username");
//获取用户上传的图像
Part userface = req.getPart("userface");
//假如我们要将用户上传的图像保存到项目当前运行的目录中
//获取项目当前真正运行的目录
String realPath = req.getServletContext().getRealPath("/");
//用户图像的保存路径: 项目的运行路径/img/2022/04/12/
String format = sdf.format(new Date());
String saveUserfacePath = realPath + "/img" + format;
//创建项目保存的目录
File folder = new File(saveUserfacePath);
if (!folder.exists()) {
//如果这个目录不存在,就创建
folder.mkdirs();
}
//获取上传文件原本的文件名
String oldName = userface.getSubmittedFileName();// 123.png
//截取原本文件名的后缀,即 .png
String suffix = oldName.substring(oldName.lastIndexOf("."));
//新的文件名
String newName = UUID.randomUUID().toString() + suffix;
//保存文件,现在就把文件保存到磁盘上了
userface.write(saveUserfacePath + newName);
//上传成功后,一般是需要返回一个json,告诉前端刚刚上传成功的文件路径
//生成文件的访问路径
String url = req.getScheme()//获取请求协议,http 或者 https
+ "://"
+ req.getServerName()//获取项目域名
+ ":"
+ req.getServerPort()//获取项目端口号
+ req.getContextPath()//获取项目名称
+ "/img" + format + newName;
//将文件的访问路径保存到数据库中
System.out.println("username = " + username);
System.out.println("url = " + url);
//将文件路径返回到前端
resp.getWriter().write(url);
}
}