JavaScript 如何實作帶有進度條的檔案上傳功能？
- WBOY原創
- 2023-10-21 10:07:47640瀏覽
JavaScript 如何實作帶有進度條的檔案上傳功能？
在現代 Web 開發中，文件上傳是常見的操作。而為了提升使用者體驗，加入有進度條的文件上傳功能是非常必要的。本文將介紹如何使用 JavaScript 實作帶有進度條的檔案上傳功能，並給出具體的程式碼範例。
一、前端頁面佈局
首先，我們需要在前端頁面上建立一個包含檔案選擇按鈕、進度條和上傳按鈕的佈局。
<!DOCTYPE html>
<html>
<head>
<title>带进度条的文件上传</title>
</head>
<body>
<h1>带进度条的文件上传</h1>
<input type="file" id="fileInput">
<progress id="progressBar" value="0" max="100"></progress>
<button onclick="uploadFile()">上传</button>
</body>
</html>在上述程式碼中，我們使用了3525558f8f338d4ea90ebf22e5cde2bc 元素來建立一個檔案選擇按鈕，6ecb87e5318a36c03c59e25d55f43372 元素來建立進度條，和一個用來觸發上傳操作的按鈕。
二、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中文網其他相關文章！