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

要学就学灰太狼

已于 2022-08-10 16:12:48 修改

阅读量317

点赞数 1

分类专栏： JavaWeb 文章标签：排序算法数据结构算法

于 2022-03-31 15:34:32 首次发布

本文链接：https://blog.csdn.net/weixin_60766221/article/details/123847408

版权

JavaWeb 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

文章目录

19.1 基本介绍

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

在这里插入图片描述

19.2 文件上传

19.2.1 文件上传的基本原理

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

在这里插入图片描述

19.2.2 文件上传应用实例

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

在这里插入图片描述

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

创建 upload.jsp

<%--
  Created by IntelliJ IDEA.
  User: 谢家升
  Date: 2022/3/30
  Version: 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设置图片url
                img.setAttribute("src", this.result);
            }
        }
    </script>

</head>
<body>
<!-- 表单的enctype属性要设置为multipart/form-data
    enctype="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 text
                        String 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/30
  Version: 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.jpg
        String 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 文件下载注意事项和细节

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

在这里插入图片描述

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

要学就学灰太狼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
19. web 应用常用功能 -文件上传下载

19.1 基本介绍文件的上传和下载，是常见的功能。后面项目就使用了文件上传下载。如果是传输大文件，一般用专门工具或者插件文件上传下载需要使用到两个包 , 需要导入说明：19.2 文件上传19.2.1 文件上传的基本原理● 文件上传原理示意图, 一图胜千言19.2.2 文件上传应用实例● 需求说明: 文件上传应用实例如图● 思路分析/图解【看前面的原理示意图即可】● 代码实现创建 upload.jsp<%-- Created by IntelliJ IDE
复制链接

扫一扫