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>
登錄后復制
在上述代碼中，我們使用了<input type="file"> 元素來創建一個文件選擇按鈕，<progress> 元素來創建一個進度條，和一個用來觸發上傳操作的按鈕。
二、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 如何實現帶進度條的文件上傳功能？的詳細內容，更多請關注www.92cms.cn其它相關文章！
