阅读量:0
要使用WebUploader实现实时上传进度反馈，你需要遵循以下步骤：
- 引入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响应返回给客户端。
现在，当用户选择文件并开始上传时，客户端将实时显示上传进度。
