文件上傳：完成進度條的百分比

Question

我正在嘗試在BuddyPress中添加“到目前為止完成的百分比”進度條到頭像上傳。 目的是阻止用戶在上傳完成之前導航離開頁面。

上傳過程由BuddyPress中的bp- bp_core_avatar_handle_upload()在文件bp-core / bp-core-avatars.php中處理。 該函數通過使用bp_core_check_avatar_upload()檢查文件是否已正確上載來bp_core_check_avatar_upload() 。 然后它檢查文件大小是否在限制范圍內，並且它具有可接受的文件擴展名（jpg，gif，png）。 如果一切都結束，則允許用戶裁剪圖像（使用Jcrop ），然后將圖像移動到其真實位置。

實際上傳由WordPress函數wp_handle_upload處理。

如何創建“完成百分比”進度條並在文件上傳時顯示？

Answer 1

我不熟悉BuddyPress，但是所有上傳處理程序（包括androbin概述的HTML5 XHR）都有一個可以綁定的文件進度掛鈎點。

我使用了uploadify ， uploadifive和swfupload ，它們都可以與相同的進度函數處理程序進行交互，以實現相同的進度條結果。

// SWFUpload
$elem.bind('uploadProgress', function(event, file, bytesLoaded) { fnProgress(file, bytesLoaded); })

// Uploadify
$elem.uploadify({ onUploadProgress: function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { fnProgress(file, bytesUploaded); });

// Uploadfive
$elem.uploadifive({ onProgress: function(file, e) { fn.onProgress(file, e.loaded); });

Uploadifive是一個基於HTML5的上傳器，只是綁定到XHR'progress'事件，因此所有這些屬性都可用於任何HTML5上傳器。

至於實際進度條形碼..

HTML：

<div class='progressWrapper' style='float: left; width: 100%'>
    <div class='progress' style='float: left; width: 0%; color: red'></div>
    <div class='progressText' style='float: left;></div>
</div>

JS：

var fnProgress = function(file, bytes) {
    var percentage = (bytesLoaded / file.size) * 100;

    // Update DOM
    $('.progress').css({ 'width': percentage + '%' });
    $('.progressText').html(Math.round(percentage + "%");
}

Answer 2

您應該使用XHR對象。 如果它對你有所幫助，我現在不行，但是我寫了一個簡單的XHR上傳器。

HTML：

    <form id="uploader" enctype="multipart/form-data" action="uploadimage.php" method="post">
        <input type="file" id="file" name="file[]" multiple="multiple" accept="image/jpeg" /><br/>
        <input type="submit" value="Upload" />
        <div class="list" style="background-color:#000;color:#FFF;padding:5px;display:none;border-radius:5px;">
        </div>
    </form>

JS：

$("#uploader").submit(function(){
    $('#uploader .list').fadeIn(100).css("width","0px");
    var data = new FormData();
    // if you want to append any other data: data.append("ID","");
    $.each($('#file')[0].files, function(i, file) {
        data.append('file-'+i, file);
    });
    $.ajax({
        url: 'uploadimage.php',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        xhr: function() {  // custom xhr
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        success: function(data2){
            $('#uploader .list').css({
                "width":"200px",
                "text-align":"center",
                "margin":"10px 0 10px 0"
            }).html("DONE!").delay(2000).fadeOut(500);
            if (data2 == "ERROR_FILESIZE"){
                return alert("Choose another file");
            }
                            else{ /*change location*/ }
        });
    return false;
});

在這種情況下，我使用uploadimage.php上傳了文件，如果打印出來：“ERROR_FILESIZE”，則會提示錯誤。

Answer 3

我認為，在您擔心客戶端之前，您應該了解服務器端實際能夠實現此目的的要求。

對於PHP，你需要啟用session.upload_progress，除非wp_handle_upload（）函數使用不同的東西，所以我在這里只是猜測，但他們可能會使用常規的PHP會話，因此需要啟用它。

如果您查看給定鏈接的注釋，許多用戶說進度狀態在某些環境下不起作用，例如FastCGI上的PHP，這是您在大多數時間在共享托管環境中獲得的。

現在這里有很多人告訴你使用XHR上傳器，但問題是他們給你一個自定義upload.php腳本的例子或類似的東西來發送數據，但是你使用的是wordpress插件，你不能控制（有點）

因此，考慮到wp_handle_upload（）實際上並不是以AJAX方式工作，那么當單擊文件上傳表單提交按鈕並在JS中設置一個定時器時，你必須掛鈎一個事件，調用一些你傳遞表單數據的URL。 ID，然后使用該ID查詢會話以檢查文件的進度：

 $_SESSION["upload_id"]["content_length"]
 $_SESSION["upload_id"]["bytes_processed"]

使用該數據，您可以計算已轉移的數量。 您可以將JS計時器設置為每秒調用，但如果他們上傳的文件不是很大（例如，大於1mb）並且它們具有良好的連接，那么通知將沒有太多進展。

請查看此鏈接，了解有關如何使用此會話上載數據的分步示例。

Answer 4

您需要注入進度條。

我認為唯一的方法是使用過濾器鈎子apply_filters（'bp_core_pre_avatar_handle_upload'等）來覆蓋函數bp_core_avatar_handle_upload。

您最終會復制大部分功能，但您應該能夠添加進度條碼。

如果您使用此功能，則應將其作為增強票提交; 這是個好主意。