day37-文件上傳和下載

来源:https://www.cnblogs.com/liyuelian/archive/2022/12/11/16974532.html
-Advertisement-
Play Games

文件上傳下載 1.基本介紹 在Web應用中,文件上傳和下載是非常常見的功能 如果是傳輸大文件一般用專門的工具或者插件 文件上傳和下載需要用到兩個包:commons-fileupload.jar和commons-io.jar 2.文件上傳 2.1文件上傳基本原理 文件上傳原理分析圖 文件上傳的解讀: ...


文件上傳下載

1.基本介紹

  1. 在Web應用中,文件上傳和下載是非常常見的功能

  2. 如果是傳輸大文件一般用專門的工具或者插件

  3. 文件上傳和下載需要用到兩個包:commons-fileupload.jar和commons-io.jar

    image-20221210191630138

2.文件上傳

2.1文件上傳基本原理

  • 文件上傳原理分析圖

    文件上傳的解讀:

    1. 仍然使用表單提交

    2. 表單屬性 action還是按照一般的規定來提交

    3. 表單屬性 method指定為post(get有大小限制一般為2k)

    4. 表單屬性 enctype,即encodetype,編碼類型,預設是application/x-www-form-urlencoded(url編碼)。url編碼形式不適合二進位文件數據的提交,一般用於文本

    5. 如果要進行二進位文件的提交,enctype要指定為 multipart/form-data,表示表單提交的數據是由多個部分組成的。這種類型既可以提交二進位數據也,可以提交文本數據。


image-20221210194231366 image-20221210193144460 image-20221210193600392

2.2文件上傳應用實例

需求說明:文件上傳

image-20221210194702769

思路:依據2.1的分析圖


首先在項目下添加web支持,添加文件上傳下載需要的jar包,添加servlet和jsp相關jar包

image-20221210202042912

上傳頁面jsp:

<%--
  Created by IntelliJ IDEA.
  User: li
  Date: 2022/12/10
  Time: 20:21
  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指定了瀏覽器url跳轉目錄--%>
    <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");
            //獲取文件對象
            let file = event.files[0];
            //獲取文件閱讀器
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                //給 img 的 src 設置圖片 url
                img.setAttribute("src", this.result);
            }
        }
    </script>
</head>
<body>
<!-- 表單的 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>

配置Servlet:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>FileUploadServlet</servlet-name>
        <servlet-class>com.li.servlet.FileUploadServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>FileUploadServlet</servlet-name>
        <url-pattern>/fileUploadServlet</url-pattern>
    </servlet-mapping>
</web-app>

FileUploadServlet:

  1. FileItem的使用
  2. 表單項目區別處理
  3. 創建目錄保存文件(根據上傳日期分目錄存放)
  4. 文件覆蓋問題處理
  5. 拓展:一次上傳多個文件功能
package com.li.servlet;

import com.li.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.*;
import javax.servlet.http.*;
import java.io.File;
import java.io.IOException;
import java.util.List;
import java.util.UUID;

/**
 * 下麵只是保存一個文件的過程,可以將83-120行封裝到一個方法中,拓展為一次上傳多個文件功能。
 */
public class FileUploadServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.先判斷是不是文件表單(enctype="multipart/form-data")
        if (ServletFileUpload.isMultipartContent(request)) {
            //2.創建DiskFileItemFactory對象,用於構建一個解析上傳數據的工具對象
            DiskFileItemFactory diskFileItemFactory =
                    new DiskFileItemFactory();
            //3.創建一個解析上傳數據的工具對象
            /**
             *      前端表單提交的就是input元素
             *      <input type="file" name="pic" id="" value="" onchange="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文件項中
            // 比如這裡封裝的就是上面對應的兩個input
            try {
                List<FileItem> list =
                        servletFileUpload.parseRequest(request);
                /*
                 * 輸出如下:
                 * list===>
                 *        [name=fish.jpg,
                 *         StoreLocation=
                 *         D:\apps\apache-tomcat-8.0.50\temp\ upload__53dac
                 *                      468_184fbfce02f__7f59_00000000.tmp,
                 *         size=476906bytes,
                 *         isFormField=false,
                 *         FieldName=pic,
                 *         name=null,
                 *         StoreLocation=
                 *         D:\apps\apache-tomcat-8.0.50\temp\ upload__53dac468_18
                 *                      4fbfce02f__7f59_00000001.tmp,
                 *         size=6bytes,
                 *         isFormField=true,
                 *         FieldName=name]
                 */
                //System.out.println("list===>" + list);
                //遍歷並分別處理
                for (FileItem fileItem : list) {
                    //System.out.println("fileItem=" + fileItem);
                    //判斷是不是一個文件
                    /**
                     * isFormField()方法用於
                     * 判斷FileItem類對象封裝的數據是一個普通文本表單欄位,還是一個文件表單欄位,
                     * 如果是普通表單欄位則返回true,否則返回false
                     */
                    if (fileItem.isFormField()) {//為true,說明普通表單項
                        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.獲取完整目錄[io+serlvet基礎]
                        String fileRealPath =
                                request.getServletContext().getRealPath(filePath);
                        //下麵的目錄是和根據你web項目運行環境改變而改變的(動態的)
                        //fileRealPath=
                        // D:\IDEA-workspace\file-upload-download\out
                        //  \artifacts\file_upload_download_war_exploded\ upload\
                        System.out.println("fileRealPath=" + fileRealPath);
                        //3.創建上傳的文件的目錄(io流的文件創建)
                        //  寫一個工具類,可以返回一個日期,如2024/11/11,
                        //  可以將不同日期上傳的文件放到不同目錄下,
                        //  防止一個文件夾存放的文件過多造成訪問速度變慢
                        File fileRealPathDirectory =
                                new File(fileRealPath + WebUtils.getYearMonthDay());

                        //fileRealPathDirectory=
                        //      D:\IDEA-workspace\file-upload-download\out
                        //      \artifacts\file_upload_download_war_exploded\
                        //      upload\2022\12\11
                        System.out.println("fileRealPathDirectory=" + fileRealPathDirectory);
                        if (!fileRealPathDirectory.exists()) {//如果文件目錄不存在
                            fileRealPathDirectory.mkdirs();//創建
                        }
                        //4.將上傳到伺服器temp目錄下的文件拷貝到上述創建的目錄下
                        //構建文件上傳的完整路徑:目錄+文件名
                        //防止出現文件覆蓋問題,將獲取到的文件名加一個首碼,保證文件名唯一即可
                        //如果擔心在高併發的情況下會出現UUID相同,可以在UUID後再加上系統當前毫秒數
                        name = UUID.randomUUID().toString() + "_" + name;
                        String fileFullPath = fileRealPathDirectory + "/" + name;
                        fileItem.write(new File(fileFullPath));

                        //5.給瀏覽器返回提示信息
                        response.setContentType("text/html;charset=utf-8");
                        response.getWriter().print("上傳成功~~");
                    }
                }
            } catch (FileUploadException e) {
                e.printStackTrace();
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            System.out.println("不是文件表單");
        }
    }
}

WebUtils:

package com.li.utils;

import java.time.LocalDateTime;

public class WebUtils {
    public static String getYearMonthDay() {
        //得到當前的日期
        LocalDateTime ldt = LocalDateTime.now();
        int year = ldt.getYear();
        int monthValue = ldt.getMonthValue();
        int dayOfMonth = ldt.getDayOfMonth();
        String yearMonthDay = year + "/" + monthValue + "/" + dayOfMonth;
        return yearMonthDay;
    }
}

測試:

redeploy Tomcat,在瀏覽器訪問http://localhost:8080/file_upload_download/upload.jsp

分別上傳兩個文件名相同的文件,查看後臺命名情況

image-20221211182238556image-20221211182246213

後臺輸出如下:

image-20221211182331622

查看out目錄,文件成功上傳至系統指定目錄/upload/年/月/日/下,且文件名相同的文件不會互相覆蓋。

image-20221211182353925

2.3文件上傳註意事項和細節

  1. 如果將文件都上傳到一個目錄下,當上傳文件很多的時候,會造成訪問文件速度變慢,因此可以將文件上傳到不同目錄 。如同一天上傳的文件,統一放到一個文件夾,以年月日的形式命名

  2. 一個完美的文件上傳,需要考慮的因素很多,比如斷點續傳、控製圖片大小、尺寸、分片上傳、防止惡意上傳等。在項目中,可以考慮使用WebUploader組件(百度開發)

    WebUploader API文檔 - Web Uploader (baidu.com)

  3. 文件上傳功能,在項目中建議有限制的使用,一般用在頭像、證明、合同、產品展示等,如果不加限制,會造成伺服器空間大量被占用[比如微信發一次朋友圈最多9張圖,b站評論不能發照片等]

  4. 文件上傳中,如果在web目錄下創建空目錄 web/upload,在 tomcat 啟動時,不會在 out 目錄下創建對應的 upload 文件夾。原因是tomcat 不會在 out 下創建對應web目錄下的空目錄,所以,只需在 web/upload 目錄下,放一個文件即可,這個是 Idea + Tomcat 的問題,,實際開發不會存在。

3.文件下載

3.1文件下載原理分析

image-20221211190045383 image-20221211190124299 image-20221211190745829

3.2文件下載應用實例

需求:演示文件下載,如圖:

image-20221211190940099

下載頁面jsp:

<%--
  Created by IntelliJ IDEA.
  User: li
  Date: 2022/12/11
  Time: 19:35
  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>
<%--超鏈接預設是get請求--%>
<%--下載的文件名name不要有空格--%>
<a href="fileDownloadServlet?name=1.jpg">點擊下載 小狗圖片</a><br/><br/>
<a href="fileDownloadServlet?name=夜的第七章-周傑倫.mp3">點擊下載 夜的第七章-周傑倫.mp3</a>
</body>
</html>

配置servlet:

<servlet>
    <servlet-name>FileDownloadServlet</servlet-name>
    <servlet-class>com.li.servlet.FileDownloadServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>FileDownloadServlet</servlet-name>
    <url-pattern>/fileDownloadServlet</url-pattern>
</servlet-mapping>

FileDownloadServlet:

package com.li.servlet;

import org.apache.commons.io.IOUtils;
import sun.misc.BASE64Encoder;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLEncoder;

public class FileDownloadServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.先準備要下載的文件[假定這些文件是公共的資源]
        //我們在web項目中的download目錄下添加要下載的文件
        // 註意:一定要保證我們的Tomcat啟動後,在工作目錄下有download文件夾,並且有可供下載的文件
        // 如果沒有在out目錄下看到你創建的文件夾,rebuild project-->restart tomcat

        //2.獲取到要下載的文件的名字
        request.setCharacterEncoding("utf-8");//處理中文
        String downloadFileName = request.getParameter("name");//根據接收到url請求的參數名決定
        //System.out.println(downloadFileName);

        //3.給http響應設置響應頭Content-Type,即文件的 MIME類型
        // 這裡我們根據要下載的文件動態獲取對應的MIME類型,再在response中設置

        String downloadPath = "/download/";//下載目錄:從web工程根目錄計算
        //要下載的文件的全路徑=下載路徑 +文件名
        String downloadFileFullPath = downloadPath + downloadFileName;
        //根據上面找到要下載的文件,得到文件的 MIME類型
        // 通過servletContext 來獲取
        ServletContext servletContext = request.getServletContext();
        String mimeType = servletContext.getMimeType(downloadFileFullPath);
        //System.out.println("mimeType=" + mimeType);
        //根據得到的文件MIME類型,在response中設置
        response.setContentType(mimeType);

        //4.給http響應設置Content-Disposition,說明回覆的內容以何種形式展示
        /**
         *  這裡要考慮的細節比較多,比如不同的瀏覽器寫法不一樣
         *  還有要考慮編碼問題:針對不同瀏覽器,對下載時,顯示中文的文件名進行不同的編碼
         *  如:火狐的中文文件名需要base64編碼,ie或者Chrome的中文文件名則使用URL編碼
         *  這裡知道原理即可
         */
        //(1)如果是Firefox,則中文編碼需要 base64
        //(2)Content-Disposition 指定回覆的內容以何種形式展示,如果是attachment,則使用文件下載方式
        //(3)其他主流瀏覽器如 ie、Chrome的中文編碼使用URL編碼操作
        if (request.getHeader("User-Agent").contains("Firefox")) {
            //User-Agent的內容包含發出請求的用戶信息
            //火狐-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)創建一個和要下載的文件關聯的輸入流(這裡使用提供的api,其他方法也可以完成)
        InputStream resourceAsStream =
                servletContext.getResourceAsStream(downloadFileFullPath);
        //(2)得到返回客戶端數據的輸出流(這裡使用位元組流,如果是文本數據,可以使用轉換流)
        ServletOutputStream outputStream = response.getOutputStream();
        //(3)使用工具類,將輸入流關聯的文件,拷貝到輸出流,並返回給客戶端/瀏覽器
        // 使用 org.apache.commons.io包中的IOUtils工具類
        // 底層是:獲取輸入流的文件數據,將其讀到輸出流中並返回
        IOUtils.copy(resourceAsStream, outputStream);
    }
}
image-20221211211022138

3.3文件下載註意事項和細節

  1. 文件下載比較麻煩的就是文件中文名的處理

  2. 因為不同的瀏覽器對中文的編碼不一樣,需要根據不同的瀏覽器進行處理

    image-20221211211314889
  3. 對於網站的文件,很多文件使用另存為即可下載,對於大文件(文檔,視頻),還是要使用專業的下載工具(如迅雷,百度網盤等)

  4. 對於不同的瀏覽器,文件下載完畢後的處理方式也不一樣,有的是會直接打開文件,有的是將文件下載到本地的下載目錄中


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 做I2S輸出用了PT8211(實際上買到的絲印是GH8211), 雙聲道, LSB格式, 工作正常但是輸出功率非常低, 喇叭聲音要貼近了才能勉強聽到, 所以打算做一個PT8211帶功放的I2S模塊. 最開始用的是PT8211 + LM386 * 2, 能正常工作就是LM386的電壓要求比較高, 只能... ...
  • 第二十四章 使用游標 本章將介紹什麼是游標以及如何使用游標 游標 之前的select語句檢索出來的數據,沒有辦法得到第一行或者下一行 有時,需要在檢索出來的行中前進或後退一行或多行。這就是使用游標的原因。 游標(cursor)是一個存儲在MySQL伺服器上的資料庫查詢,它不是一條SELECT語句,而 ...
  • 之前安裝MYSQL8.0的時候安裝的是綠色版,在cmd中配置完所有參數之後,在連接SQLyog的時候卻報出了以下錯誤 翻譯一下大致的意思為:客戶端不支持伺服器請求的身份驗證協議;考慮升級MYSQL客戶端 這是因為MYSQL8.0之後更換了加密規則為caching_sha2_password,8.0之 ...
  • MySQL數據模型 關係型資料庫是建立在關係模型基礎上的資料庫,簡單說,關係型資料庫是由多張能互相連接的 二維表 組成的資料庫 關係型資料庫的優點: 都是使用表結構,格式一致,易於維護。 使用通用的 SQL 語言操作,使用方便,可用於複雜查詢。 關係型資料庫都可以通過SQL進行操作,所以使用方便。 ...
  • 我們前面採集的日誌數據已經保存到 Kafka 中,作為日誌數據的 ODS 層,從 Kafka 的ODS 層讀取的日誌數據分為 3 類, 頁面日誌、啟動日誌和曝光日誌。這三類數據雖然都是用戶行為數據,但是有著完全不一樣的數據結構,所以要拆分處理。將拆分後的不同的日誌寫回 Kafka 不同主題中,作為日 ...
  • 單線程的JS 就是一個傻子,腦子一根筋,做著當前的這件事情,沒有完成之前,絕對不會做下一件事情,那麼通過什麼方法可以讓JS變“聰明”? ...
  • 測試環境 Python 3.6 Win10 代碼實現 #!/usr/bin/env python 3.4.0 #-*- encoding:utf-8 -*- __author__ = 'shouke' import xml.etree.ElementTree as ET def compare_xm ...
  • 書接上回 大數據量、高併發業務怎麼優化?(一) 文章中介紹了非同步批處理的三種方式,本文繼續深入針對前兩種進行講解,並給出代碼示例: 一 普通版本,採用阻塞隊列 ArrayBlockingQueue 使用普通方式能夠直接基於JDK中現成的併發包 ArrayBlockingQueue 提供的 offer ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...