如何為 PHP 檔案上傳新增進度條？-php教程-PHP中文網

如何為 PHP 檔案上傳新增進度條？

DDD

發布： 2024-12-21 16:24:19

原創

399 人瀏覽過

How to Add a Progress Bar to Your PHP File Uploads?

如何在PHP 中實現上傳進度條

您是否正在開發相簿上傳器並希望在上傳過程中顯示進度條上傳過程？本文提供了一個簡潔的解決方案，用於在 PHP 上傳腳本中新增進度條。

PHP 上傳進度條解決方案

而不是從頭開始建立自訂進度條解決方案，我們建議使用 Fine Uploader 函式庫。這個函式庫有幾個優點：

簡單：很容易設定並整合到您的 PHP 腳本中。
廣泛的兼容性：它在共享託管環境中運作良好，不需要外部 PHP 庫，例如APC。
進度回饋：為每個上傳的檔案提供即時進度更新。
進階功能：支援 HTML5 拖曳拖曳功能和多個檔案上傳。

實現Fine Uploader

要在腳本中實現Fine Uploader：

訪問GitHub 頁面：https://github .com/FineUploader/fine-uploader
下載該程式庫並將其解壓縮到您的網頁伺服器目錄中。
將以下行包含在您的包含PHP 檔案後的腳本：

<script src="path_to_fine_uploader/jquery.fine-uploader.js"></script>

登入後複製

使用自訂選項初始化上傳器：

<script>
$(document).ready(function() {
    $('#fine-uploader').fineUploader({
        request: {
            endpoint: 'path_to_your_upload_script.php'
        },
        validation: {
            sizeLimit: 102400000 // in bytes (100 Mb)
        },
        callbacks: {
            onUpload: function(id, fileName) {
                console.log('Upload started for:', fileName);
            },
            onProgress: function(id, fileName, uploadedBytes, totalBytes) {
                var progress = Math.round(100 * uploadedBytes / totalBytes);
                console.log('Progress:', fileName, progress + '%');
            },
            onComplete: function(id, fileName, responseJSON) {
                console.log('Upload completed:', fileName);
            }
        }
    });
});
</script>

登入後複製