在現代 Web 開發中，文件上傳和下載是經常遇到的需求。 JavaScript 作為前端開發的語言之一，提供了許多強大的工具庫和 API 來管理檔案上傳和下載的過程。
本文將探討如何使用 JavaScript 實作檔案上傳和下載的功能，首先介紹基於 HTML5 的 File API，然後使用 jQuery 和 XMLHttpRequest 發送 AJAX 請求來實作檔案上傳和下載。
一、HTML5 的 File API
HTML5 的 File API 可以讓 JavaScript 讀取和操作本地文件，包括上傳和下載。這個 API 包含了 File 和 FileReader 兩個物件來解決這些問題。
File 物件代表了透過類似輸入欄位上傳的本機文件，這個物件有一系列屬性來描述這個文件，例如文件名稱、大小、類型等。還有一些方法可以用來讀取這個文件的內容。
例如：
#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 實作檔案上傳。
基礎文件上傳的實作如下：
上述程式碼中，我們首先定義了一個HTML 表單，包含一個文件上傳輸入框和一個上傳按鈕。然後使用 jQuery 的 ajax 方法來非同步地將表單資料傳送到後端進行處理。在傳送時，我們需要設定 processData 和 contentType 為 false，以確保 FormData 物件能夠正確地傳送給伺服器，而不會被樣式化。
要顯示檔案上傳的進度，我們需要做以下更改：
$('#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 實作檔案下載的範例：
下载文件
上面的程式碼中，我們建立了一個新的 XMLHttpRequest 對象，並呼叫 open 方法開啟 GET 請求。我們使用 responseType 屬性來告訴伺服器，期望的回應類型是二進位數據，然後當請求完成時，我們使用 onload 事件來處理回應，並將回應的二進位資料轉換成 Blob 對象，並建立一個連結以下載檔案。
總結
本文主要介紹如何使用 JavaScript（包括 File API、jQuery 和 XMLHttpRequest）實作檔案上傳和下載的過程。在實作過程中，需要注意各種情況下的相容性問題，例如瀏覽器相容性，以及表單提交資料的處理和顯示進度的方式等。透過了解這些內容，我們可以更好地處理文件上傳和下載的需求。
以上是javascript怎麼實現文件上傳和下載功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
