JavaScript 如何實作帶有進度條的檔案上傳功能？
在現代 Web 開發中，文件上傳是常見的操作。而為了提升使用者體驗，加入有進度條的文件上傳功能是非常必要的。本文將介紹如何使用 JavaScript 實作帶有進度條的檔案上傳功能，並給出具體的程式碼範例。
一、前端頁面佈局
首先，我們需要在前端頁面上建立一個包含檔案選擇按鈕、進度條和上傳按鈕的佈局。
带进度条的文件上传 带进度条的文件上传
在上述程式碼中，我們使用了元素來建立一個檔案選擇按鈕，
二、JavaScript 實作上傳功能
接下來，我們使用 JavaScript 實作檔案上傳功能，並在上傳過程中即時更新進度列。
function uploadFile() { var fileInput = document.getElementById("fileInput"); var file = fileInput.files[0]; var xhr = new XMLHttpRequest(); xhr.open("POST", "/upload", true); xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var percentComplete = Math.round((e.loaded / e.total) * 100); var progressBar = document.getElementById("progressBar"); progressBar.value = percentComplete; } }, false); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log("上传完成"); } }; xhr.send(file); }
在上述程式碼中，我們首先取得到檔案選擇按鈕的元素，並取得所選的檔案。然後，我們建立 XMLHttpRequest 對象，並指定 POST 請求的 URL。在這裡，你需要根據實際情況修改為你自己的後端介面位址。
接著，我們監聽上傳過程中的 progress 事件，在每次進度更新時，計算上傳的百分比，並更新進度條的值。
在請求的 readyState 變成 4（請求已完成），同時 status 為 200（請求成功）時，我們可以判斷檔案上傳已完成。
三、後端處理檔案上傳
上述程式碼只是處理了前端的檔案上傳邏輯，還需要在後端進行對應的處理。這裡以 Node.js 為例，使用 Express 框架來處理檔案上傳請求，並將檔案儲存到伺服器。
const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.single('file'), function (req, res, next) { // 文件上传成功后的处理逻辑 console.log(req.file); });
在這段程式碼中，我們首先引入 Express 和 multer 模組，並使用 multer 中間件來處理檔案上傳請求。 multer 設定了檔案上傳的目標目錄為 "uploads/"，透過 upload.single('file') 來接收名為 "file" 的檔案。
在檔案上傳成功後，可以在控制台列印出 req.file 對象，該物件包含了上傳檔案的相關訊息，如檔案名稱、檔案大小等。
四、總結
透過上述的程式碼範例，我們成功實作了一個帶有進度條的檔案上傳功能。在前端部分，透過 JavaScript 監聽上傳過程中的 progress 事件，即時更新進度條的值。在後端部分，透過 Express 框架和 multer 中間件來處理檔案上傳請求，並將檔案儲存到伺服器。
如需在實際專案中使用，請依實際情況修改程式碼。希望這篇文章能幫助你實現一個快速、方便的文件上傳功能。
以上是JavaScript 如何實作帶有進度條的檔案上傳功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
