19. web 应用常用功能 -文件上传下载

文章目录

19.1 基本介绍
19.2 文件上传
- 19.2.1 文件上传的基本原理
- 19.2.2 文件上传应用实例
- 19.2.3 文件上传注意事项和细节
19.3 文件下载
- 19.3.1 文件下载的原理分析图
- 19.3.2 文件下载应用实例
- 19.3.3 文件下载注意事项和细节

19.1 基本介绍

文件的上传和下载，是常见的功能
后面项目就使用了文件上传下载
如果是传输大文件，一般用专门工具或者插件
文件上传下载需要使用到两个包，需要导入
说明：

19.2 文件上传

19.2.1 文件上传的基本原理

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

19.2.2 文件上传应用实例

需求说明：文件上传应用实例如图

思路分析/图解，看前面的原理示意图即可
代码实现

创建 upload.jsp

<%--Created by IntelliJ IDEA.User: 谢家升Date: 2022/3/30Version: 1.0
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 指定了base标签 --><base href="<%=request.getContextPath()+"/"%>>"><style type="text/css">input[type="submit"] {outline: none;border-radius: 5px;cursor: pointer;background-color: #31B0D5;border: none;width: 70px;height: 35px;font-size: 20px;}img {border-radius: 50%;}form {position: relative;width: 200px;height: 200px;}input[type="file"] {position: absolute;left: 0;top: 0;height: 200px;opacity: 0;cursor: pointer;}</style><script type="text/javascript">function prev(event) {//获取展示图片的区域var img = document.getElementById("prevView");//获取文件对象var file = event.files[0];//获取文件阅读器： Js的一个类，直接使用即可var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function () {//给img的src设置图片urlimg.setAttribute("src", this.result);}}</script></head>
<body>
<!-- 表单的enctype属性要设置为multipart/form-dataenctype="multipart/form-data" 表示提交的数据是多个部分构造，有文件和文本-->
<form action="fileUploadServlet" method="post" enctype="multipart/form-data">家居图: <img src="2.jpg" alt="" width="200" height="200" id="prevView"><input type="file" name="pic" id="" value="" onchange="prev(this)"/>家居名: <input type="text" name="name"><br/><input type="submit" value="上传"/>
</form>
</body>
</html>

创建 FileUploadServlet.java

package com.xjs.servlet;import com.xjs.utils.WebUtils;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.List;
import java.util.UUID;/*** @Author: 谢家升* @Date: 2022/3/30-03-30-15:34* @Version: 1.0*/
public class FileUploadServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("FileUploadServlet 被调用...");//1.先判断是不是文件表单(enctype="multipart/form-data")if (ServletFileUpload.isMultipartContent(request)) {//System.out.println("ok");//2.创建 DiskFileItemFactory 对象，用于构建一个解析上传数据的工具对象DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();//3.创建一个解析上传数据的工具对象/***  表单提交的数据就是input元素*     家居图: <img src="2.jpg" alt="" width="200" height="200" id="prevView">*     <input type="file" name="pic" id="" value="" οnchange="prev(this)"/>*     家居名: <input type="text" name="name"><br/>*     <input type="submit" value="上传"/>*/ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);//解决接收到的文件名是中文乱码问题servletFileUpload.setHeaderEncoding("utf-8");//4.关键点, servletFileUpload 可用把表单提交的数据 text/文件，封装到 FileItem 文件项中//  编程技巧：如果我们不知道一个对象是什么结构【1.输出 2.debug 3.底层自动看到】try {List<FileItem> list = servletFileUpload.parseRequest(request);//System.out.println("list ==> " + list);/*list ==> [name=1.jpg, StoreLocation=D:\Projram\apache-tomcat-8.0.50\temp\xupload_38a26f60_17fd9b5f415__7f56_00000000.tmp, size=157734bytes, isFormField=false, FieldName=pic,name=null, StoreLocation=D:\Projram\apache-tomcat-8.0.50\temp\xupload_38a26f60_17fd9b5f415__7f56_00000001.tmp, size=3bytes, isFormField=true, FieldName=name]*///遍历list，并分别处理 ==> 感情的自然流露for (FileItem fileItem : list) {//System.out.println("fileItem= " + fileItem);//判断是不是一个文件 ==> 你是OOP程序员if (fileItem.isFormField()) {//如果为true就是文本 input textString name = fileItem.getString("utf-8");System.out.println("家具名= " + name);} else {//是一个文件//获取上传的文件名String name = fileItem.getName();System.out.println("上传的文件名= " + name);//把这个上传到 服务器的 temp目录下的文件保存到你指定的目录//1.指定目录, 就是我们网站工作目录下String filePath = "/upload/";//2.获取到完整工作目录String fileRealPath = request.getServletContext().getRealPath(filePath);//System.out.println("fileRealPath= " + fileRealPath);//fileRealPath= E:\javaweb_project\fileupdown\out\artifacts\fileupdown_war_exploded\xupload\//3.创建这个上传的文件目录//  思路：写一个工具类，可用返回 /2024/11/11 字符串File fileRealPathDirectory = new File(fileRealPath + WebUtils.getYearMonthDay());if (!fileRealPathDirectory.exists()) {//如果不存在就创建fileRealPathDirectory.mkdirs();//创建}//4.将文件拷贝到 fileRealPathDirectory 目录下//  构建一个上传文件的完整路径 ： 目录+文件名//  对上传的文件名进行处理，前面增加一个前缀，保证的唯一即可name = UUID.randomUUID().toString() + "_" + System.currentTimeMillis() + "_" + name;String fileFullPath = fileRealPathDirectory + "/" + name;fileItem.write(new File(fileFullPath));//5.提示信息response.setContentType("text/html;charset=utf-8");response.getWriter().write("<h1>上传成功~</h1>");}}} catch (Exception e) {e.printStackTrace();}} else {System.out.println("不是文件表单...");}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}

创建工具类 webUtils.java

import java.time.LocalDateTime;public class WebUtils {public static String getYearMonthDay() {//如何得到当前的日期-> java基础 日期 三代类LocalDateTime ldt = LocalDateTime.now();int year = ldt.getYear();int monthValue = ldt.getMonthValue();int dayOfMonth = ldt.getDayOfMonth();String yearMonthDay = year + "/" + monthValue + "/" + dayOfMonth + "/";return yearMonthDay;}//技巧, 最好测试一把//public static void main(String[] args) {//    System.out.println(WebUtils.getYearMonthDay());//}
}

测试看看文件是否上传成功

19.2.3 文件上传注意事项和细节

如果将文件都上传到一个目录下，当上传文件很多时，会造成访问文件速度变慢，因此可以将文件上传到不同目录比如一天上传的文件，统一放到一个文件夹年月日，比如21001010 文件夹
一个完美的文件上传，要考虑的因素很多，比如断点续传、控制图片大小，尺寸，分片上传，防止恶意上传等，在项目中，可以考虑使用 WebUploader 组件(百度开发)，链接： http://fex.baidu.com/webuploader/doc/index.html
文件上传功能，在项目中建议有限制的使用，一般用在头像、证明、合同、产品展示等，如果不加限制，会造成服务器空间被大量占用 [比如 b 站评论，就不能传图片，微信发1次朋友圈最多 9 张图等…]
文件上传，创建 web/upload 的文件夹，在 tomcat 启动时，没有在 out 目录下创建对应的 upload 文件夹, 原因是 tomcat 对应空目录是不会在 out 下创建相应目录的，所以，只需在 upload 目录下，放一个文件即可，这个是 Idea + Tomcat 的问题，实际开发不会存在 [演示]

19.3 文件下载

19.3.1 文件下载的原理分析图

● 文件下载原理分析图

19.3.2 文件下载应用实例

需求：演示文件下载，如图

● 代码实现

先准备好可供下载的静态资源

创建 download.jsp

<%--Created by IntelliJ IDEA.User: 谢家升Date: 2022/3/30Version: 1.0
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文件下载</title><base href="<%=request.getContextPath()+"/"%>>">
</head>
<body>
<h1>文件下载</h1>
<a href="fileDownloadServlet?name=1.jpg">点击下载小狗图片</a><br/><br/>
<a href="fileDownloadServlet?name=高山流水.mp3">点击下载 高山流水.mp3</a><br/><br/>
</body>
</html>

创建 FileDownloadServlet.java

package com.xjs.servlet;import org.apache.commons.io.IOUtils;
import sun.misc.BASE64Encoder;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;/*** @Author: 谢家升* @Date: 2022/3/30-03-30-18:24* @Version: 1.0*/
public class FileDownloadServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//System.out.println("fileDownloadServlet 被调用...");//1.先准备要下载的文件【假定这些文件是公共的资源】//  重要提醒：保证当我们的Tomcat启动后，在工作目录out下有download文件夹，//  并且有可供下载的文件//  再次说明：如果没有看到你创建的download在工作目录out下，//  需要 rebuild project --> restart, 就 ok//2.获取到要下载的文件的名字request.setCharacterEncoding("utf-8");String downloadFileName = request.getParameter("name");System.out.println("downloadFileName= " + downloadFileName);//3.给http响应设置响应头 Content-Typ，就是 文件的MIME//  通过servletContext 来获取ServletContext servletContext = request.getServletContext();String downloadPath = "/download/"; //下载目录从web工程根目录计算 /download/1.jpgString downloadFileFullPath = downloadPath + downloadFileName;String mimeType = servletContext.getMimeType(downloadFileFullPath);System.out.println("mimeType= " + mimeType);response.setContentType(mimeType);//4.给http响应，设置响应头 Content-Disposition//  这里细节比较多，比如不同浏览器的写法不一样，还有要考虑编码//  ff 是 文件名中文需要 base64 编码 ，而 ie/chrome 是 URL 编码//  这里知道原理即可/*解读：(1) 如果是Firefox 则中文编码需要 base64(2) Content-Disposition 是指定下载的数据的展示形式 , 如果attachment 则使用文件下载方式(3) 如果是其他(主流ie/chrome) 中文编码使用URL编码*/if (request.getHeader("User-Agent").contains("Firefox")) {// 火狐 Base64编码response.setHeader("Content-Disposition", "attachment; filename==?UTF-8?B?" +new BASE64Encoder().encode(downloadFileName.getBytes("UTF-8")) + "?=");} else {// 其他(主流ie/chrome)使用URL编码操作response.setHeader("Content-Disposition", "attachment; filename=" +URLEncoder.encode(downloadFileName, "UTF-8"));}//5.读取下载文件数据，返回给客户端/浏览器//(1) 创建一个和要下载的文件，关联的输入流InputStream resourceAsStream =servletContext.getResourceAsStream(downloadFileFullPath);//(2) 得到返回数据的输出流 【因为返回文件大多数是二进制(字节) 】ServletOutputStream outputStream = response.getOutputStream();//(3) 使用工具类，将输入流关联的文件，对拷到输出流，并返回给客户端/浏览器IOUtils.copy(resourceAsStream, outputStream);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}

完成测试

19.3.3 文件下载注意事项和细节

文件下载，比较麻烦的就是文件名中文处理
因此，在代码中，针对不同浏览器做了处理

对于网站的文件，很多文件使用另存为即可下载，对于大文件(文档，视频)，会使用专业的下载工具(迅雷、百度，腾讯，华为网盘等)
对于不同的浏览器，在把文件下载完毕后，处理的方式不一样，有些是直接打开文件，有些是将文件下载到本地/下载目

19. web 应用常用功能 -文件上传下载相关推荐

ASP.NET中常用的文件上传下载方法
ASP.NET中常用的文件上传下载方法文件的上传下载是我们在实际项目开发过程中经常需要用到的技术,这里给出几种常见的方法,本文主要内容包括: 1.如何解决文件上传大小的限制 2.以文件形式保存到服务 ...
java 瑞吉外卖day4及补全功能文件上传下载菜品分页查询 Dto类菜品状态修改菜品停售以及菜品删除
文件上传下载文件下载介绍文件上传代码实现服务端上传: @RestController @RequestMapping("/common") @Slf4j public cla ...
.NET技术 ASP.NET中常用的文件上传下载方法(多文件上传)
文件的上传下载是我们在实际项目开发过程中经常需要用到的技术,这里给出几种常见的方法,本文主要内容包括: 1.如何解决文件上传大小的限制 2.以文件形式保存到服务器 3.转换成二进制字节流保存到数据库以 ...
[转]ASP.NET中常用的文件上传下载方法
1.如何解决文件上传大小的限制 2.以文件形式保存到服务器 3.转换成二进制字节流保存到数据库以及下载方法 4.上传Internet上的资源第一部分: 首先我们来说一下如何解决ASP.NET ...
java前后端分离的实现方式_采用前后端分离的方式进行开发，实现了几种常用的文件上传功能...
MyUploader-Backend 单文件上传,多文件上传,大文件上传,断点续传,文件秒传,图片上传简介采用前后端分离的方式进行开发,实现了几种常用的文件上传功能. 前端采用 vue.js + ...
JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...
springboot：实现文件上传下载实时进度条功能【附带源码】
0. 引言记得刚入行的时候,做了一个文件上传的功能,因为上传时间较久,为了用户友好性,想要添加一个实时进度条,显示进度.奈何当时技术有限,查了许久也没用找到解决方案,最后不了了之. 近来偶然想到这个 ...
教你如何实现c#文件上传下载功能
简单介绍一下c#文件上传下载功能实现. NuGet 安装SqlSugar Model文件下新建 DbContext 类 public class DbContext {public DbContext ...
SpringMVC整合fastdfs-client-java实现web文件上传下载
为什么80%的码农都做不了架构师?>>> 版权声明:本文为博主原创文章,转载请标明出处(http://blog.csdn.net/wlwlwlwl015)Thanks. 目录( ...

19. web 应用常用功能 -文件上传下载

文章目录

19.1 基本介绍

19.2 文件上传

19.2.1 文件上传的基本原理

19.2.2 文件上传应用实例

19.2.3 文件上传注意事项和细节

19.3 文件下载

19.3.1 文件下载的原理分析图

19.3.2 文件下载应用实例

19.3.3 文件下载注意事项和细节

19. web 应用常用功能 -文件上传下载相关推荐

最新文章

热门文章