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 的问题, 实际开发不会存在 以上需求在代码已经解决
