JavaScript 面试题 目录

如何使用 JavaScript 实现文件的上传和下载？

推荐答案

文件上传

使用 HTML <input type="file"> 元素结合 JavaScript 的 FormData 对象和 fetch 或 XMLHttpRequest 可以实现文件上传。

HTML:

JavaScript:

-- -------------------- ---- -------
----- -------- ------------ -
  ----- --------- - -------------------------------------
  ----- ---- - -------------------

  -- ------- -
    --------------------
    -------
  -

  ----- -------- - --- -----------
  ----------------------- ------ -- ------ ---------------------

  --- -
    ----- -------- - ----- ---------------- - -- --------- -----------
      ------- -------
      ----- ---------
    ---

    -- ------------- -
      ----- ------ - ----- ----------------
      --------------- - ------------------------ -- -------- ---- --
    - ---- -
      --------------- - -----------------
    -
  - ----- ------- -
    --------------------------- -------
    --------------------
  -
-

核心解释

  1. 通过 <input type="file"> 获取用户选择的文件。
  2. 创建一个 FormData 对象。
  3. 使用 formData.append('file', file) 添加文件数据（file 是服务器端接收文件的字段名）。
  4. 使用 fetch 发起 POST 请求到服务器端上传接口。
  5. 根据服务器响应处理上传成功或失败的情况。

文件下载

文件下载可以通过设置 HTML <a> 元素的 href 属性为文件 URL，或使用 fetch 获取文件并将其作为 Blob 对象处理。

方法一：使用 <a> 标签（适用于已知文件 URL）

HTML: <a id="downloadButton" href="#">下载文件(方法二)</a> JavaScript (方法二)：使用 fetch 和 Blob

-- -------------------- ---- -------
----- -------- -------------- -
    ----- -------------- - ------------------------------------------
    --- -
        ----- -------- - ----- ---------------------------- --  -------------------- -----------

        -- -------------- -
            ----- --- ---------------- ---------------------
        -

        ----- ---- - ----- ----------------
        ----- --- - ---------------------------------
        ----- - - ----------------------------
        ------ - ----
        ---------- - -------------- -- ---------
        -----------------------------
        ----------
        -------------------------------- -- -- --- --
        -----------------------------
    - ----- ------- -
        --------------------------- -------
        --------------------
    -
-
---------------------- - -------------

核心解释

  1. 方法一 (使用 <a> 标签)

    • 直接使用 <a> 标签的 href 属性指向文件 URL。
    • download 属性指定下载时的文件名。

  2. 方法二 (使用 fetch 和 Blob)

    • 使用 fetch 获取文件数据。
    • 将响应转换为 Blob 对象。
    • 使用 URL.createObjectURL(blob) 创建一个 Blob URL。
    • 创建一个临时的 <a> 标签，设置其 href 为 Blob URL，并模拟点击实现下载。
    • 使用 URL.revokeObjectURL(url) 释放创建的 URL 对象。

本题详细解读

文件上传的详细解读

HTML <input type="file">

  • <input type="file"> 元素允许用户从本地文件系统中选择一个或多个文件。
  • multiple 属性可以允许多文件选择。
  • accept 属性可以限制选择的文件类型（例如：accept="image/*" 只允许选择图片）。
  • 使用 JavaScript 可以通过 files 属性获取用户选择的文件列表，它是一个 FileList 对象。

JavaScript FormData

  • FormData 对象提供了一种构造键值对集合的方式，用于通过 XMLHttpRequest 或 fetch 发送表单数据。
  • FormData.append(name, value) 方法用于添加一个键值对，其中 value 可以是字符串或 File 对象。
  • 对于文件上传，通常使用 FormData 来封装文件数据，并发送给服务器。

fetch API

  • fetch API 提供了一种现代的方式来发起网络请求。
  • 它返回一个 Promise 对象，用于处理异步操作。
  • fetch 的第一个参数是请求的 URL，第二个参数是一个配置对象，其中包含了请求方法（method）、请求头（headers）和请求体（body）。
  • 对于文件上传，需要将请求方法设置为 POST，并将 FormData 对象作为 body 发送。

服务端处理

  • 服务端需要接收并处理上传的文件，这通常包括：
    • 接收 FormData 发送的文件数据。
    • 将文件保存到服务器的文件系统中或云存储中。
    • 返回一个 JSON 响应，包含上传结果。

文件下载的详细解读

HTML <a> 标签

  • <a> 标签用于创建超链接。
  • href 属性指定链接的目标 URL，可以是绝对 URL 或相对 URL。
  • download 属性（可选）指定下载时的文件名。
  • 对于文件下载，可以将 href 指向文件 URL，浏览器会自动触发下载。

JavaScript fetch 和 Blob

  • 当文件 URL 不直接可用，或者需要动态处理下载时，可以使用 fetch 获取文件数据。
  • fetch 获取到的响应需要通过 response.blob() 方法转换为 Blob 对象。
  • Blob (Binary Large Object) 表示一个不可变的，原始数据的类似文件的对象。
  • URL.createObjectURL(blob) 创建一个临时的 URL，指向 Blob 对象。
  • URL.revokeObjectURL(url) 释放创建的 URL 对象，避免内存泄漏。
  • 需要创建一个临时的 <a> 标签，并模拟点击它，才能触发下载。

服务端处理

  • 对于需要动态生成文件的情况，服务器端需要：
    • 根据请求生成文件数据。
    • 设置正确的 Content-Type 和 Content-Disposition HTTP 头。
    • 将文件数据返回给客户端。
上一篇： 如何使用 JavaScript 操作 Blob 和 File 对象？
下一篇： 如何使用 JavaScript 实现拖放 (Drag and Drop) 操作？
纠错
反馈