web 应用常用功能 -文件上传（新思路）

2023-08-08 112

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： web 应用常用功能 -文件上传（新思路）

web 应用常用功能 -文件上传下载（新思路）

基本介绍

1. 文件的上传和下载，是常见的功能。

2. 后面项目就使用了文件上传下载。

3. 如果是传输大文件，一般用专门工具或者插件

4. 文件上传下载需要使用到两个包 , 需要导入

5. 说明:

文件上传应用实列

文件上传的基本原理

● 文件上传原理示意图, 一图胜千言.

代码实战

创建前端upload.jsp

1. 
2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
3. <!DOCTYPE html>
4. <html lang="en">
5. <head>
6. <meta charset="UTF-8">
7. <title>Title</title>
8. <!-- 指定了base标签 -->
9. <base href="<%=request.getContextPath()+"/"%>>">
10. <style type="text/css">
11. input[type="submit"] {
12. outline: none;
13. border-radius: 5px;
14. cursor: pointer;
15. background-color: #31B0D5;
16. border: none;
17. width: 70px;
18. height: 35px;
19. font-size: 20px;
20.         }
21. 
22. img {
23. border-radius: 50%;
24.         }
25. 
26. form {
27. position: relative;
28. width: 200px;
29. height: 200px;
30.         }
31. 
32. input[type="file"] {
33. position: absolute;
34. left: 0;
35. top: 0;
36. height: 200px;
37. opacity: 0;
38. cursor: pointer;
39.         }
40. </style>
41. 
42. <script type="text/javascript">
43. function prev(event) {
44. //获取展示图片的区域
45. var img = document.getElementById("prevView");
46. //获取文件对象
47. var file = event.files[0];
48. //获取文件阅读器： Js的一个类，直接使用即可
49. var reader = new FileReader();
50.             reader.readAsDataURL(file);
51.             reader.onload = function () {
52. //给img的src设置图片url
53.                 img.setAttribute("src", this.result);
54.             }
55.         }
56. </script>
57. 
58. </head>
59. <body>
60. <!-- 表单的enctype属性要设置为multipart/form-data
61.     enctype="multipart/form-data" 表示提交的数据是多个部分构造，有文件和文本
62.  -->
63. 
64. <form action="fileUploadServlet" method="post" enctype="multipart/form-data">
65.     家居图: <img src="2.jpg" alt="" width="200" height="200" id="prevView">
66. <input type="file" name="pic" id="" value="" onchange="prev(this)"/>
67. 
68.     家居名: <input type="text" name="name"><br/>
69. 
70. <input type="submit" value="上传"/>
71. </form>
72. </body>
73. </html>

创建后端相应方法

实现步骤

1.指定一个目录 , 就是我们网站工作目录下

2. 获取到完整目录 [io/servlet基础]

3. 创建这个上传的目录=> 创建目录?=> Java基础

/**

* 表单提交的数据就是 input 元素

* <input type="file" name="pic" id="" value="2xxx.jpg" οnchange="prev(this)"/>

* 家居名: <input type="text" name="name"><br/>

* <input type="submit" value="上传"/>

4. 将文件拷贝到fileRealPathDirectory目录

下面是输出结果

list==>

[name=3.jpg, StoreLocation=D:\wyxedu_javaweb\apache-tomcat-8.0.50-windows-x64\apache-tomcat-8.0.50\temp\xupload__7e34374f_17fce4168b1__7f4b_00000000.tmp, size=106398bytes, isFormField=false, FieldName=pic,

name=null, StoreLocation=D:\wyxedu_javaweb\apache-tomcat-8.0.50-windows-x64\apache-tomcat-8.0.50\temp\xupload__7e34374f_17fce4168b1__7f4b_00000001.tmp, size=6bytes, isFormField=true, FieldName=name]

5. 是一个文件

把这个上传到服务器的 temp下的文件保存到你指定的目录

1.指定一个目录 , 就是我们网站工作目录下

2. 获取到完整目录 [io/servlet基础]

这个目录是和你的web项目运行环境绑定的. 是动态.

3. 创建这个上传的目录=> 创建目录?=> Java基础

思路; 我们也一个工具类，可以返回 /2024/11/11 字符串

4. 将文件拷贝到fileRealPathDirectory目录

构建一个上传文件的完整路径：目录+文件名

对上传的文件名进行处理, 前面增加一个前缀，保证是唯一即可

1. import com.wyxedu.utils.WebUtils;
2. import org.apache.commons.fileupload.FileItem;
3. import org.apache.commons.fileupload.FileUploadException;
4. import org.apache.commons.fileupload.disk.DiskFileItemFactory;
5. import org.apache.commons.fileupload.servlet.ServletFileUpload;
6. 
7. import javax.servlet.ServletException;
8. import javax.servlet.http.HttpServlet;
9. import javax.servlet.http.HttpServletRequest;
10. import javax.servlet.http.HttpServletResponse;
11. import java.io.File;
12. import java.io.IOException;
13. import java.util.List;
14. import java.util.UUID;
15. 
16. public class FileUploadServlet extends HttpServlet {
17. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
18. //System.out.println("FileUploadServlet 被调用...");
19. 
20. //1. 判断是不是文件表单(enctype="multipart/form-data")
21. if (ServletFileUpload.isMultipartContent(request)) {
22. //System.out.println("OK");
23. //2. 创建 DiskFileItemFactory 对象, 用于构建一个解析上传数据的工具对象
24. DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
25. //3. 创建一个解析上传数据的工具对象
26. /**
27.              *     表单提交的数据就是 input 元素
28.              *     <input type="file" name="pic" id="" value="2xxx.jpg" onchange="prev(this)"/>
29.              *     家居名: <input type="text" name="name"><br/>
30.              *     <input type="submit" value="上传"/>
31.              */
32. ServletFileUpload servletFileUpload =
33. new ServletFileUpload(diskFileItemFactory);
34. //解决接收到文件名是中文乱码问题
35.             servletFileUpload.setHeaderEncoding("utf-8");
36. 
37. //4. 关键的地方, servletFileUpload 对象可以把表单提交的数据text / 文件
38. //   将其封装到 FileItem 文件项中
39. try {
40.                 List<FileItem> list = servletFileUpload.parseRequest(request);
41. /*
42.                 list==>
43. 
44.                 [name=3.jpg, StoreLocation=D:\wyxedu_javaweb\apache-tomcat-8.0.50-windows-x64\apache-tomcat-8.0.50\temp\xupload__7e34374f_17fce4168b1__7f4b_00000000.tmp, size=106398bytes, isFormField=false, FieldName=pic,
45.                 name=null, StoreLocation=D:\wyxedu_javaweb\apache-tomcat-8.0.50-windows-x64\apache-tomcat-8.0.50\temp\xupload__7e34374f_17fce4168b1__7f4b_00000001.tmp, size=6bytes, isFormField=true, FieldName=name]
46. 
47.                  */
48. //System.out.println("list==>" + list);
49. //遍历，并分别处理=> 自然思路
50. for (FileItem fileItem : list) {
51. //System.out.println("fileItem=" + fileItem);
52. //判断是不是一个文件=> 你是OOP程序员
53. if (fileItem.isFormField()) {//如果是true就是文本 input text
54. String name = fileItem.getString("utf-8");
55.                         System.out.println("家具名=" + name);
56.                     } else {//是一个文件
57. 
58. //用一个方法
59. //获取上传的文件的名字
60. String name = fileItem.getName();
61.                         System.out.println("上传的文件名=" + name);
62. 
63. //把这个上传到 服务器的 temp下的文件保存到你指定的目录
64. //1.指定一个目录 , 就是我们网站工作目录下
65. String filePath = "/upload/";
66. //2. 获取到完整目录 [io/servlet基础]
67. //  这个目录是和你的web项目运行环境绑定的. 是动态.
68. //fileRealPath=D:\wyxedu_javaweb\fileupdown\out\artifacts\fileupdown_war_exploded\xupload\
69. String fileRealPath =
70.                                 request.getServletContext().getRealPath(filePath);
71.                         System.out.println("fileRealPath=" + fileRealPath);
72. 
73. //3. 创建这个上传的目录=> 创建目录?=> Java基础
74. //   思路; 我们也一个工具类，可以返回 /2024/11/11 字符串
75. File fileRealPathDirectory = new File(fileRealPath + WebUtils.getYearMonthDay());
76. if (!fileRealPathDirectory.exists()) {//不存在，就创建
77.                             fileRealPathDirectory.mkdirs();//创建
78.                         }
79. 
80. //4. 将文件拷贝到fileRealPathDirectory目录
81. //   构建一个上传文件的完整路径 ：目录+文件名
82. //   对上传的文件名进行处理, 前面增加一个前缀，保证是唯一即可, 不错
83.                         name = UUID.randomUUID().toString() + "_" +System.currentTimeMillis() + "_" + name;
84. String fileFullPath = fileRealPathDirectory + "/" +name;
85.                         fileItem.write(new File(fileFullPath));
86. 
87. //5. 提示信息
88.                         response.setContentType("text/html;charset=utf-8");
89.                         response.getWriter().write("上传成功~");
90. 
91. 
92.                     }
93.                 }
94. 
95.             } catch (Exception e) {
96.                 e.printStackTrace();
97.             }
98.         } else {
99.             System.out.println("不是文件表单...");
100.         }
101.     }
102. 
103. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
104.         doPost(request, response);
105.     }
106. }

总结

1. 如果将文件都上传到一个目录下，当上传文件很多时，

会造成访问文件速度变慢，因此可以将文件上传到不同目录比如一天上传的文件，统一放到一个文件夹年月日, 比如21001010 文件夹以上需求在代码已经解决

2. 一个完美的文件上传，要考虑的因素很多，

比如断点续传、控制图片大小，尺寸，分片上传，防止恶意上传等，在项目中，可以考虑使用 WebUploader 组件(百度开发)http://fex.baidu.com/webuploader/doc/index.html

3. 文件上传功能，在项目中建议有限制的使用，

一般用在头像、证明、合同、产品展示等，如果不加限制，会造成服务器空间被大量占用 [比如 b 站评论，就不能传图片，微信发 1次朋友圈最多 9 张图等..]

4、文件上传，创建 web/upload 的文件夹，在 tomcat 启动时，没有在 out 目录下创建对应的 upload 文件夹, 原因是 tomcat 对应空目录是不会在 out 下创建相应目录的，所以，只需在 upload 目录下，放一个文件即可, 这个是 Idea + Tomcat 的问题, 实际开发不会存在以上需求在代码已经解决

web 应用常用功能 -文件上传（新思路）

web 应用常用功能 -文件上传下载（新思路）

基本介绍