文章目录
1. 单文件上传
1.1 前端页面显示
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 相对路径都以base路径为标准 -->
<%
String scheme = request.getScheme() + "://";
String server = request.getServerName() + ":";
String port = request.getServerPort()+"";
String projectName = request.getContextPath() + "/";
String basePath = scheme+server+port+projectName;
%>
<html>
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<title>Insert title here</title>
</head>
<body>
<form action="FileServlet" method="post" enctype="multipart/form-data">
<input type="file" name="newFile"/>
<br><br>
<input type="text" name="name">
<br><br>
<input type="submit" name="上传文件" />
</form>
</body>
</html>
显示效果
1.2 Servlet后台处理请求
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 获取有关上传文件的信息对象
Part filePart = req.getPart("newFile");
// 获取文件名
String fileName = filePart.getSubmittedFileName();
// 规定一个上传的文件存到服务器哪个位置 --- 必须绝对路径
String filePath = req.getServletContext().getRealPath("/File/") + fileName;
// 获取前端上传的文件的字节流输入流对象
InputStream is = filePart.getInputStream();
// 将二进制字节流持久到硬盘
FileOutputStream fos = new FileOutputStream(filePath);
byte[] buffer = new byte[1024];
int length = -1;
while ((length = is.read(buffer)) != -1) {
fos.write(buffer, 0, length);
}
is.close();
fos.close();
// 在前端提示上传成功的弹框
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().print("<script>alert('上传成功')</script>");
}
2. 多文件上传
切记必须设置
不可缺少name的设置，否则servlet获取不了上传的文件流
2.1 前端页面显示
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String scheme = request.getScheme() + "://";
String serverName = request.getServerName() + ":";
String port = request.getServerPort()+"";
String projectName = request.getContextPath() + "/";
String basePath = scheme+serverName+port+projectName;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<base href="<%=basePath %>">
<title>Insert title here</title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<button id="add_btn">添加</button><br><br>
<form action="FileMulitiServlet" method="post" enctype="multipart/form-data">
<div class="container"></div>
<input type="submit" name="上传文件"></input>
</form>
</body>
<script>
$(function() {
// 页面必须始终保持一个<input>文件上传输入框
addFile();
var count = 1;
// 文件上传添加按钮事件处理
$("#add_btn").click(function(){
addFile();
count++;
})
// 文件上传按钮删除事件处理
$(".container").on("click", ".del_btn", function() {
if(count == 1) {
return;
}
$(this).parent().remove();
count--;
})
// 增添文件上传输入框的方法
function addFile() {
$(".container").append('<div><input name="file" type="file"><button type="button" class="del_btn">删除</button></div><br><br>');
}
})
</script>
</html>
页面显示
2.2 Servlet后台处理请求
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 规定一个存文件的地方
String projectRealPath = req.getServletContext().getRealPath("/File/");
String filePath = null;
// 定义初始化一个输出、输入流
OutputStream os = null;
InputStream is = null;
// 获取所有part参数对象
Collection<Part> parts = req.getParts();
// 查找全部的part参数对象
for(Part part : parts) {
String fileName = part.getSubmittedFileName();
// 判断part这个对象是否存有文件名，有则说明是文件对象
if(fileName != null) {
is = part.getInputStream();
filePath = projectRealPath + fileName;
os = new FileOutputStream(filePath);
byte[] buffer = new byte[2048];
int len = -1;
// 将用户上传的文件持久化服务器硬盘上
while( (len=is.read(buffer)) != -1 ) {
os.write(buffer, 0, len);
}
// 记得关闭 -- 否则文件的内容为空
is.close();
os.close();
}
}
// 上传文件成功，则显示信给客户
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("上传成功");
}
运行效果
