javascript - 文件上传: Percentage completed progress bar

我正在尝试向BuddyPress中的头像上传添加“到目前为止已完成的百分比”进度条。目的是阻止用户在上传完成之前离开页面。

在BuddyPress中，上传过程由bp-core/bp-core-avatars.php文件中的bp_core_avatar_handle_upload()处理。该功能通过检查文件是否已使用bp_core_check_avatar_upload()正确上传而开始。然后，它检查文件大小是否在限制范围内，并且具有可接受的文件扩展名(jpg，gif，png)。如果一切顺利，则允许用户裁剪图像(使用Jcrop)，然后将图像移动到其实际位置。

实际的上传由WordPress函数wp_handle_upload处理。

如何在上传文件时创建“完成百分比”进度条并显示它？

最佳答案

我对BuddyPress并不熟悉，但是所有上载处理程序(包括androbin概述的HTML5 XHR)都具有可绑定(bind)到的文件进度 Hook 点。

我使用了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的上传器，仅绑定(bind)到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 + "%");
}