2024年Web前端最全文件上传与下载（基于前端页面到Servlet服务器）(1)，2024年最新资深Web前端面试题

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

// //一：直接将前端JSP页面上form表单的内容打印出来

// //1 为什么接收不到呢？因为客户端是以流的形式发送的，所以必须以流的形式接收

// System.out.println(req.getParameter(“username”));

// System.out.println(req.getParameter(“photo”));

//

// //2 就像Socket通讯一样接收。但这里我直接用一个巨大的buf将数据一次性全放在缓冲区

// // 可以看到打印出来的字符串是按照Http协议的，Http协议如下

// ServletInputStream inputStream = req.getInputStream();

// byte[] buf = new byte[102400];

// int length = inputStream.read(buf);

// System.out.println(new String(buf, 0, length));

//二：接下来使用第三方jar包来处理，可以看到服务端已经收到客户端的数据，现在的问题就是怎么将我们的数据解析

// 成我们想要的文件，其实像这种文件上传的非常常见的功能，已经有很多第三方jar包为我们做了模块的封装。

//1 先判断上传的数据是否多段数据（只有是多段的数据，才是文件上传的）

if (ServletFileUpload.isMultipartContent(req)) {

//创建FileItemFactory工厂实现类，对于一个接口，我们肯定要找它的实现类来发现其功能

FileItemFactory fileItemFactory = new DiskFileItemFactory();

// 创建用于解析上传数据的工具类ServletFileUpload类

ServletFileUpload servletFileUpload = new ServletFileUpload(fileItemFactory);

try {

// 解析上传的数据，得到每一个表单项FileItem

List list = servletFileUpload.parseRequest(req);

// 循环判断，每一个表单项，是普通类型，还是上传的文件

for (FileItem fileItem : list) {

if (fileItem.isFormField()) {

// 普通表单项

System.out.println(“普通表单项的name属性值：” + fileItem.getFieldName());

// 参数UTF-8.解决乱码问题

System.out.println(“普通表单项的value属性值：” + fileItem.getString(“UTF-8”));

} else {

// 上传的文件

System.out.println(“文件表单项的name属性值：” + fileItem.getFieldName());

System.out.println(“上传的文件名：” + fileItem.getName());

fileItem.write(new File(“E:\” + fileItem.getName()));

}

}

} catch (Exception e) {

e.printStackTrace();

}

}

}

}

5）在web.xml中加入配置文件以此来实现前端和后端的映射

UploadServlet

sharm.servlet.UploadServlet

UploadServlet

/uploadServlet

这样就大功告成了！

4 文件的下载

==========================================================================

实例： 服务器将文件返回给客户端，同时让客户端可以下载该图片。

操作步骤：

1）在src目录下新建DownloadServlet.java文件

import org.apache.commons.io.IOUtils;

import javax.servlet.ServletContext;

import javax.servlet.ServletException;

import javax.servlet.ServletOutputStream;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.InputStream;

import java.net.URLEncoder;

public class DownloadServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

//1 获取要下载的文件名

String downloadFileName = “1.jpg”;

//2 读取要下载的文件内容（通过Servlet对象可以读取）

ServletContext servletContext = getServletContext();

//2.1 获取要下载文件的文件类型

String mimeType = servletContext.getMimeType(“/picture/” + downloadFileName);

System.out.println(“下载的文件类型为：” + mimeType);

//2.2 在回传前通过响应头告诉客户端返回的数据类型

resp.setContentType(mimeType);

//2.3 到这里为止，我们只能返回给客户端，但图片却直接在浏览器中显示

// 还要告诉客户端收到的数据是用来下载的（还是用过响应头的方式）

resp.setHeader(“Content-Disposition”, “attachment; fileName” + downloadFileName);

//2.4 其中的/在服务器端解析的是http://ip:port/工程名/ 也就是映射到当前工程的web目录

InputStream resourceAsStream = servletContext.getResourceAsStream(“/picture/” + downloadFileName);

//2.5 获取响应的输出流：本来需要先将流转换成某一个数组，再将数组转化成流，现在我们可以直接用jar包的方法进行两种流的直接转换

// 读取输入流中的全部数据，复制给输出流

ServletOutputStream outputStream = resp.getOutputStream();

IOUtils.copy(resourceAsStream, outputStream);

}

}

2）在web.xml中加入配置文件

DownloadServlet

sharm.servlet.DownloadServlet

DownloadServlet

/downloadServlet

但还有一种异常，那就是下载的文件名要求是英文的，如果文件名是中文，则会造成乱码，解决方法在IE、Chrome和火狐上有所不同，下面我来介绍一下解决办法：

1. 针对IE、Chrome：利用如下代码替换掉原来代码

//2.3 到这里为止，我们只能返回给客户端，但图片却直接在浏览器中显示

// 还要告诉客户端收到的数据是用来下载的（还是用过响应头的方式）

resp.setHeader(“Content-Disposition”, “attachment; fileName” + downloadFileName);

// 2.3.1 针对IE、Chrome，先把中文名进行UTF-8 编码操作，然后把编码后的字符串设置到响应头中

String str1 = “attachment; fileName=” + URLEncoder.encode(downloadFileName, “UTF-8”);

resp.setHeader(“Content-Disposition”, str1);

2. 针对火狐浏览器：利用如下代码替换掉原来代码

//2.3 到这里为止，我们只能返回给客户端，但图片却直接在浏览器中显示

// 还要告诉客户端收到的数据是用来下载的（还是用过响应头的方式）

resp.setHeader(“Content-Disposition”, “attachment; fileName” + downloadFileName);

// 2.3.2 针对火狐浏览器，使用下面的格式进行BASE64编码后，BASE64Encoder()这个方法在JDK1.8之

// 后已经不支持了，而且现在火狐浏览器也不会出现这样的问题了，但可以导入Base64相应的其它包

String str2 = “attachment; fileName=” + “=?utf-8?B?”

• new BASE64Encoder().encode(“中文.jpg”.getBytes(“utf-8”)) + “?=”;

resp.setHeader(“Content-Disposition”, str2);

3. 利用一个选择判断使得源代码即可适用于IE、Chrome，又可适用于火狐浏览器。如下：

//2.3.3 合在一起

String ua = resp.getHeader(“User-Agent”);

//判断是否是火狐浏览器

if (ua.contains(“Firefox”)) {

// 使用下面的格式进行BASE64 编码后

//其中=？表示编码内容的开始

总结

三套“算法宝典”

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注