javascript - 文件上传 : Percentage completed progress bar

Question

我正在尝试为 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 .

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

Answer 1

我不熟悉 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 的 uploader ，它简单地绑定(bind)到 XHR“进度”事件，因此所有这些属性都可用于任何 HTML5 uploader 。

至于实际进度条码..

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 + "%");
}