单文件、多文件上传

文章目录

1. 单文件上传
- 1.1 前端页面显示
- 1.2 Servlet后台处理请求
2. 多文件上传
- 2.1 前端页面显示
- 2.2 Servlet后台处理请求

表单

servlet前

注意事项

属性设置 → enctype：multipart/form-data

注解设置 → @MultipartConfig()

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后台处理请求

 @Overrideprotected 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("上传成功");}

运行效果

单文件、多文件上传 - Tomcat相关推荐

jsp 文件/图片上传tomcat服务器
关于文件/图片上传tomcat服务器 1.环境准备和情况说明 JSP 可以与 HTML form 标签一起使用,来允许用户上传文件到服务器. 上传的文件可以是文本文件或图像文件或任何文档. 使用 Se ...
java序列化表单同步请求_Ajax serialize() 表单进行序列化方式上传文件
通过传统的 form 表单提交的方式上传文件上传文件: 不过传统的 form 表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用 Ajax 的方式进行请求的. 使用 ...
仿抖音短视频h5单页版htnl上传即可使用源码文件
仿抖音短视频的模板项目是前后端分离,前端采用uniapp开发,后端目前是用frphp临时搭建的接口,后续为了方便管理内容,会移植到极致cms上.现在也可丢到网站里当一个单页使用,无聊时可以刷一刷短视 ...
step-by-step多文件WEB批量上传(swfupload)的完美解决方案
来源:http://www.cnblogs.com/goody9807/archive/2008/11/04/1326098.html 功能完全支持ie和firefox浏览器! 一般的WEB方式文件上 ...
form表单刷新_《大胖 ? 小课》- 不用 js 实现文件无刷新上传
这是<大胖小课>栏目的专题一<说说文件上传那些事儿>的第3节-<不用 js 实现文件无刷新上传> 专题已经更新章节: <大胖 • 小课>- 我是这样理解 ...
如何设置input实现同时选中多个文件并同时上传
#1.表单上传文件的步骤: ##- 1)设置enctype 默认为:enctype="application/x-www-form-urlencoded"(一般不设置)若要表单中有 ...
SpringBoot+El-upload实现上传文件到通用上传接口并返回文件全路径(若依前后端分离版源码分析)
场景 SpringBoot+ElementUI实现通用文件下载请求(全流程图文详细教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
vue+element-ui大文件的分片上传和断点续传js-spark-md5和browser-md5-file
注意:以下共两份代码片段,第一份为原博主链接代码,第二份自己写的整体代码(比较乱) 1.参考 https://www.cnblogs.com/kelelipeng/p/10158599.html (j ...
如何在Webstorm/Phpstorm中设置连接FTP，并快速进行文件比较，上传下载，同步等操作...
Phpstorm除了能直接打开localhost文件之外,还可以连接FTP,除了完成正常的数据传递任务之外,还可以进行本地文件与服务端文件的异同比较,同一文件自动匹配目录上传,下载,这些功能是平常I ...
WEB版一次选择多个文件进行批量上传(Plupload)的解决方案
说明:Plupload支持多种浏览器,多种上传方式! 一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传,就算是批量上传,也要把文件一个一个的添加到页面,无法如 w ...

单文件、多文件上传 - Tomcat

文章目录

1. 单文件上传

1.1 前端页面显示

1.2 Servlet后台处理请求

2. 多文件上传

2.1 前端页面显示

2.2 Servlet后台处理请求

单文件、多文件上传 - Tomcat相关推荐

最新文章

热门文章