javascript怎麼實現文件上傳和下載功能

在現代 Web 開發中，文件上傳和下載是經常遇到的需求。 JavaScript 作為前端開發的語言之一，提供了許多強大的工具庫和 API 來管理檔案上傳和下載的過程。

本文將探討如何使用 JavaScript 實作檔案上傳和下載的功能，首先介紹基於 HTML5 的 File API，然後使用 jQuery 和 XMLHttpRequest 發送 AJAX 請求來實作檔案上傳和下載。

一、HTML5 的 File API

HTML5 的 File API 可以讓 JavaScript 讀取和操作本​​地文件，包括上傳和下載。這個 API 包含了 File 和 FileReader 兩個物件來解決這些問題。

1. File 物件

File 物件代表了透過類似輸入欄位上傳的本機文件，這個物件有一系列屬性來描述這個文件，例如文件名稱、大小、類型等。還有一些方法可以用來讀取這個文件的內容。

例如：

<input type="file" id="fileInput" />

<script>
const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
console.log(file.name)         // 文件名
console.log(file.size)         // 文件大小
console.log(file.type)         // MIME 类型
</script>

2. FileReader 物件

#FileReader 物件可用於讀取文件，並將檔案內容儲存在記憶體中以進行進一步處理。有三個事件用於追蹤讀取過程：onloadstart、onprogress 和 onload。例如：

const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
const reader = new FileReader()

reader.onload = function() {
    console.log(reader.result)  // 读取完成后的文件内容
}

reader.readAsText(file)         // 按文本格式读取文件

二、jQuery 檔案上傳

jQuery 是一個非常強大的JavaScript 函式庫，提供了大量強大的API，其中包含AJAX 請求，讓我們能夠使用JavaScript 實作檔案上傳。

1. 基礎文件上傳

基礎文件上傳的實作如下：

<!-- HTML 代码 -->
<form enctype="multipart/form-data" id="form">
  <input type="file" name="file" />
  <button type="button" id="upload">上传</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // JavaScript 代码
  $('#upload').click(() => {
    const formData = new FormData($('#form')[0])
    $.ajax({
      url: '/upload',
      type: 'POST',
      cache: false,
      processData: false,
      contentType: false,
      data: formData,
      success: function (res) {
        console.log(res)
      },
      error: function (err) {
        console.log(err)
      },
    })
  })
</script>

上述程式碼中，我們首先定義了一個HTML 表單，包含一個文件上傳輸入框和一個上傳按鈕。然後使用 jQuery 的 ajax 方法來非同步地將表單資料傳送到後端進行處理。在傳送時，我們需要設定 processData 和 contentType 為 false，以確保 FormData 物件能夠正確地傳送給伺服器，而不會被樣式化。

2. 顯示上傳進度

要顯示檔案上傳的進度，我們需要做以下更改：

$('#upload').click(() => {
  const formData = new FormData($('#form')[0])
  $.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    processData: false,
    contentType: false,
    data: formData,
    xhr: function () {
      const xhr = new window.XMLHttpRequest()
      xhr.upload.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
          const percent = Math.round((e.loaded / e.total) * 100)
          console.log(percent + '%')
        }
      }, false)
      return xhr
    },
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    },
  })
})

上面的程式碼中，我們將xhr 函數傳遞給ajax 方法，這個函數傳回XMLHttpRequest 物件。然後我們使用 addEventListener 方法來新增 progress 事件監聽器，計算上傳進度的百分比並將其列印到控制台上。

三、XMLHttpRequest 檔案下載

XMLHttpRequest 是一種可以用於建立客戶端的 JavaScript 對象，它可以透過 AJAX 請求來取得伺服器數據，也可以用於檔案下載。

下面是一個透過 XMLHttpRequest 實作檔案下載的範例：

<a href="#" id="download">下载文件</a>
<script>
  $('#download').click(() => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', '/download', true)
    xhr.responseType = 'blob'
    xhr.onload = function (e) {
      if (this.status === 200) {
        const blob = new Blob([this.response], { type: 'application/octet-stream' })
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'file.zip'
        link.click()
      }
    }
    xhr.send()
  })
</script>

上面的程式碼中，我們建立了一個新的 XMLHttpRequest 對象，並呼叫 open 方法開啟 GET 請求。我們使用 responseType 屬性來告訴伺服器，期望的回應類型是二進位數據，然後當請求完成時，我們使用 onload 事件來處理回應，並將回應的二進位資料轉換成 Blob 對象，並建立一個連結以下載檔案。

總結

本文主要介紹如何使用 JavaScript（包括 File API、jQuery 和 XMLHttpRequest）實作檔案上傳和下載的過程。在實作過程中，需要注意各種情況下的相容性問題，例如瀏覽器相容性，以及表單提交資料的處理和顯示進度的方式等。透過了解這些內容，我們可以更好地處理文件上傳和下載的需求。

以上是javascript怎麼實現文件上傳和下載功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！