Question

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

上传过程由文件bp-core / bp-core-avatars.php中的bp_core_avatar_handle_upload()在BuddyPress中处理。该功能通过使用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）并且它们具有良好的连接，那么通知将没有太多进展。

检查this link以获取有关如何使用此会话上传数据的分步示例。

Answer 4

您需要注入进度条。

我认为唯一的方法是使用过滤器钩子apply_filters（'bp_core_pre_avatar_handle_upload'等）来覆盖函数bp_core_avatar_handle_upload

您最终会复制大部分功能，但您应该可以添加进度条码。

如果您使用此功能，则应将其作为增强票提交;这是个好主意。

文件上传：完成进度条的百分比

4 个答案: