我正在尝试为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处理。
如何创建“完成百分比”进度条并在文件上传时显示？
【问题讨论】：
标签： javascript php jquery wordpress buddypress
我不熟悉 BuddyPress，但所有上传处理程序（包括 android 概述的 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 + "%");
}
【讨论】：
您应该使用 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”，那么它会提示错误。
【讨论】：
我认为，在您担心客户端的事情之前，您应该了解服务器端的要求才能真正做到这一点。
对于 PHP，您需要启用 session.upload_progress，除非 wp_handle_upload() 函数使用不同的东西，所以我在这里只是猜测，但他们可能确实使用常规 PHP 会话的东西因此需要启用它。
如果您查看给定链接的 cmets，许多用户表示进度状态在某些环境下不起作用，例如 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）并且它们具有良好的连接，那么将不会通知太多进度。
查看this link，了解如何使用此会话上传数据的分步示例。
【讨论】：
您需要注入进度条。
我认为唯一的方法是使用过滤器挂钩 apply_filters( 'bp_core_pre_avatar_handle_upload' 等) 覆盖函数 bp_core_avatar_handle_upload
您最终会复制大部分功能，但您应该能够添加进度条代码。
如果你得到这个工作，你应该把它作为增强票提交；这是个好主意。
【讨论】：