溫馨提示×

如何利用WebUploader實現實時上傳進度反饋

小樊
82
2024-10-10 11:54:01
欄目: 編程語言

要使用WebUploader實現實時上傳進度反饋，你需要遵循以下步驟：

  1. 引入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>
    <!-- 創(chuàng)建一個用于上傳的容器 -->
    <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/*' // 可選擇文件類型
            }
        });

        // 監(jiān)聽上傳進度事件
        uploader.on('uploadProgress', function(file, percentage) {
            var $li = uploader.getFile(file);
            $li.find('.progress .progress-bar').css('width', percentage * 100 + '%');
        });

        // 監(jiān)聽上傳成功事件
        uploader.on('uploadSuccess', function(file, response) {
            var $li = uploader.getFile(file);
            $li.find('.status').text('上傳成功');
        });

        // 監(jiān)聽上傳失敗事件
        uploader.on('uploadError', function(file, reason) {
            var $li = uploader.getFile(file);
            $li.find('.status').text('上傳失敗');
        });

        // 監(jiān)聽文件添加事件
        uploader.on('fileQueued', function(file) {
            var $li = uploader.getFile(file);
            $li.find('.info .name').text(file.name);
        });

        // 監(jiān)聽文件移除事件
        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替換為你的服務器上傳地址。

  1. 服務器端處理上傳請求：

為了實現實時上傳進度反饋，服務器端需要正確處理上傳請求，并在上傳過程中返回進度信息。這取決于你使用的服務器端技術。例如，如果你使用Node.js和multer庫，你可以通過監(jiān)聽上傳進度事件來獲取進度信息，并將其返回給客戶端。

這是一個簡單的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響應返回給客戶端。

現在，當用戶選擇文件并開始上傳時，客戶端將實時顯示上傳進度。

0 踩