要使用WebUploader實現實時上傳進度反饋，你需要遵循以下步驟：
在你的HTML文件中，引入WebUploader的相關文件。你可以從官方網站下載，或者通過CDN鏈接引入。以下是通過CDN引入的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebUploader實時上傳進度反饋</title>
<!-- 引入WebUploader CSS文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.5/webuploader.min.css">
</head>
<body>
<!-- 創建一個用于上傳的容器 -->
<div id="uploader">
<div class="queueList">
<div id="thelist" class="item">
<div class="info">
<div class="file">
<span class="preview"></span>
<div class="info">
<p class="name"></p>
<p class="size">0 B</p>
<p class="status">等待上傳...</p>
</div>
</div>
</div>
</div>
</div>
<div class="btns">
<div id="picker">選擇文件</div>
<button id="ctlBtn" class="btn btn-default">開始上傳</button>
</div>
</div>
<!-- 引入WebUploader JavaScript文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.5/webuploader.min.js"></script>
<script>
// 初始化WebUploader
var uploader = WebUploader.create({
// 選項配置
auto: true,
swf: 'Uploader.swf', // Flash文件路徑
server: 'your-server-url', // 服務器上傳地址
pick: '#picker', // 選擇文件的按鈕
accept: {
title: 'Images', // 顯示文本
extensions: 'gif,jpg,jpeg,bmp,png', // 可選擇文件擴展名
mimeTypes: 'image/*' // 可選擇文件類型
}
});
// 監聽上傳進度事件
uploader.on('uploadProgress', function(file, percentage) {
var $li = uploader.getFile(file);
$li.find('.progress .progress-bar').css('width', percentage * 100 + '%');
});
// 監聽上傳成功事件
uploader.on('uploadSuccess', function(file, response) {
var $li = uploader.getFile(file);
$li.find('.status').text('上傳成功');
});
// 監聽上傳失敗事件
uploader.on('uploadError', function(file, reason) {
var $li = uploader.getFile(file);
$li.find('.status').text('上傳失敗');
});
// 監聽文件添加事件
uploader.on('fileQueued', function(file) {
var $li = uploader.getFile(file);
$li.find('.info .name').text(file.name);
});
// 監聽文件移除事件
uploader.on('fileDequeued', function(file) {
var $li = uploader.getFile(file);
$li.remove();
});
// 點擊開始上傳按鈕
document.getElementById('ctlBtn').onclick = function() {
uploader.upload();
};
</script>
</body>
</html>
請將your-server-url替換為你的服務器上傳地址。
為了實現實時上傳進度反饋，服務器端需要正確處理上傳請求，并在上傳過程中返回進度信息。這取決于你使用的服務器端技術。例如，如果你使用Node.js和multer庫，你可以通過監聽上傳進度事件來獲取進度信息，并將其返回給客戶端。
這是一個簡單的Node.js服務器端示例，使用express和multer處理文件上傳，并返回上傳進度：
const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();
app.post('/upload', upload.single('file'), (req, res) => {
let progress = 0;
req.file.stream.on('data', chunk => {
progress += chunk.length;
});
req.file.stream.on('end', () => {
progress /= req.file.size;
res.json({ progress: progress * 100 });
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
這個示例中，服務器端會在上傳過程中計算進度百分比，并將其作為JSON響應返回給客戶端。
現在，當用戶選擇文件并開始上傳時，客戶端將實時顯示上傳進度。
