文件上传：完成进度条的百分比 [英] File uploads: Percentage completed progress bar

问题描述

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

I'm trying to add a 'percentage completed so far' progress bar to avatar uploads in BuddyPress. The aim is to stop users navigating away from the page before the upload is completed.

上传过程由BuddyPress处理 bp_core_avatar_handle_upload（）在文件bp-core / bp-core-avatars.php中。该函数通过使用 bp_core_check_avatar_upload（）检查文件是否已正确上载来启动。然后它检查文件大小是否在限制范围内，并且它具有可接受的文件扩展名（jpg，gif，png）。如果一切都结束，则允许用户裁剪图像（使用 Jcrop ）然后图像移动到其真实位置。

The upload process is handled in BuddyPress by bp_core_avatar_handle_upload() in file bp-core/bp-core-avatars.php. The function starts off by checking that the file has been uploaded properly using bp_core_check_avatar_upload(). It then checks that the file size is within limits, and that it has an accepted file extension (jpg, gif, png). If everything checks out, the user is allowed to crop the image (uses Jcrop) and then the image is moved to its real location.

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

The actual upload is handled by the WordPress function wp_handle_upload.

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

How can I create a 'percentage completed' progress bar and display it when the file is uploading?

推荐答案

我不熟悉BuddyPress，但所有上传处理程序（包括androbin概述的HTML5 XHR）都有一个文件进度钩子指出你可以绑定到。

I'm not familiar with BuddyPress, but all upload handlers (including the HTML5 XHR one that androbin outlined) will have a file progress hook point that you can bind to.

我使用过 uploadify ，uploadifive 和 swfupload ，并且它们都可以与相同的进度函数处理程序进行交互，以获得相同的进度条结果。

I've used uploadify, uploadifive and swfupload, and they can all interact with the same progress function handler in order to acheive the same progress bar result.

// 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上传者。

Uploadifive, being an HTML5 based uploader, simply binds to the XHR 'progress' event, so all these properties will be available to any HTML5 uploader.

至于实际进度条形码..

As for the actual progress bar code..

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

这篇关于文件上传：完成进度条的百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！