AjaxFileUpload.js 是一個用于實現文件上傳功能的 JavaScript 庫，它可以通過 AJAX 方式將文件上傳到服務器。要實現文件上傳進度條，你需要結合 HTML、CSS 和 JavaScript（包括 AjaxFileUpload.js）來完成。以下是一個簡單的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload with Progress Bar</title>
<style>
/* 添加一些基本樣式 */
#progress-bar {
width: 100%;
height: 30px;
background-color: #f3f3f3;
position: relative;
}
#progress-bar-inner {
width: 0%;
height: 100%;
background-color: #4CAF50;
position: absolute;
}
</style>
</head>
<body>
<input type="file" id="fileInput" />
<button id="uploadButton">Upload</button>
<div id="progress-bar">
<div id="progress-bar-inner"></div>
</div>
<!-- 引入 AjaxFileUpload.js -->
<script src="ajaxfileupload.js"></script>
<script>
// 初始化文件上傳組件
var uploader = new AjaxFileUpload();
uploader.bind('fileQueued', function (event, file, status) {
console.log('File queued:', file.name);
});
uploader.bind('fileProgress', function (event, file, status) {
var progressBarInner = document.getElementById('progress-bar-inner');
progressBarInner.style.width = status.percent + '%';
});
uploader.bind('fileSuccess', function (event, file, response) {
console.log('File uploaded successfully:', file.name);
});
uploader.bind('fileError', function (event, file, status) {
console.log('File upload failed:', file.name);
});
// 監聽上傳按鈕點擊事件
document.getElementById('uploadButton').addEventListener('click', function () {
uploader.upload();
});
</script>
</body>
</html>
確保你已經引入了 AjaxFileUpload.js 庫。你可以從官方網站下載它，或者使用 CDN 鏈接。
在上面的示例中，我們創建了一個簡單的進度條結構，并使用 CSS 設置了基本樣式。然后，我們使用 JavaScript 初始化了文件上傳組件，并綁定了 fileProgress 事件處理器來更新進度條的寬度。最后，我們監聽了上傳按鈕的點擊事件，并在點擊時觸發文件上傳。
這個示例僅用于演示目的，實際應用中你可能需要根據實際需求進行調整。例如，你可以在上傳過程中顯示更詳細的進度信息，或者在上傳完成后執行其他操作。
