🤔文件上传
1.Form表单形式实现
1.1 前端?
更改表单提交方式:form enctype = “multipart/form-data”,method 必须为post
(如果不更改,则文件上传并不能上传实际文件里的内容,上传的只是文件名称等元信息)
默认的表单提交方式为application/x-www-form-urlencoded
上传文件后网络抓包
1.2 后端
-
先正常操作,重写doPost
-
然后,必须使用@MultipartConfig修饰类
-
读取文件时,用req.getPart()
如下面这个例子:
前端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="/upload">
<input type="text" name="username">
<input type="text" name="password">
<input type="file" name="file">
<button>上传文件</button>
</form>
</body>
</html>
后端:
package file_upload;
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.IOException;
import java.io.InputStream;
/**
* @author sunny
* @date 2022/06/16 18:57
**/
//读取的是文件,必须加这个注释,否则会保500错误
@MultipartConfig
@WebServlet("/upload")
public class UploadServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 其他数据还可以跟之前一样正常读,当然,也可以用req.getPart读
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println(username);
System.out.println(password);
// 读取文件
Part file = req.getPart("file");
System.out.println(file.getName());
// 输出文件内容
InputStream inputStream = file.getInputStream();
byte[] buf = new byte[1024];
int n = inputStream.read(buf);
String s = new String(buf,0,n,"utf-8");
System.out.println(s);
}
}
实现结果:
点击选择文件,弹出本地文件目录,选择将要上传的文件即可
文件上传其实就是存储到服务器端,因为这里我们只有自己的主机,所以,实现上传保存到本地即可,如下
1.3 实现文件的上传然后保存到本地
package file_upload;
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;
/**
* @author sunny
* @date 2022/06/16 19:18
**/
@MultipartConfig
@WebServlet("/filesave")
public class SaveFile extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Part file = req.getPart("file");
// 获得文件的名称
String submittedFileName = file.getSubmittedFileName();
// 把文件复制到一指定路径
// System.out.println(submittedFileName);
// String filename = "D:\\A\\" + submittedFileName;
// System.out.println(filename);
直接调用writ方法,保存到本地
// file.write(filename);
// 把绝对路径替换成运行时路径,直接根据运行时路径就可以访问到该资源,就是复制到webapp下
String realPath = req.getServletContext().getRealPath("/upload");
System.out.println(realPath);
new File(realPath).mkdirs();
String path2 = realPath + "\\" + submittedFileName;
file.write(path2);
}
}
上述我们把存储路径存储在了项目的webApp文件夹下的upload目录下,所以便可以在这个路径下直接访问到上传的资源
2.Js + Ajax实现
文件提交的另一种实现方式是 JS+Ajax,后续再详解。