php - 如何使用 AJAX 显示 PHP curl 进度

Question

我正在使用 CakePHP 编写一个 PHP 网络应用程序框架(v2.x)。在我的一个观点中，有一个表单可以将大视频文件上传到第 3 方 API。文件很大，所以上传很容易需要一两分钟。因此，我使用 AJAX 提交表单并向用户展示跳舞的河马(或其他)，以便他们知道轮子仍在转动。这是该脚本，它使用 jquery form plugin :

<script>
var options = {
    //complete : callback_function...,
    //error : callback_function...,
    beforeSend : function() {
        $("#MediaSubmitForm").hide();
        $("#MediaSubmitForm").after('<img class="hula-hippo" src="/img/hippo-hula.gif" />');

    },
    success : function(data){
        $(".hula-hippo").hide();
        $("#MediaSubmitForm").after("<h3>Upload complete!</h3>");
        console.log(data);
    },
    uploadProgress: function(event, position, total, percentComplete){
        console.log(percentComplete);
    }

};
$("#MediaSubmitForm").ajaxForm(options);
</script>

为了不将我们的 API key 暴露给客户端，我将表单提交给 Controller 操作，该操作使用 curl 从服务器向 API 发出实际的 POST 请求。这是该方法(和一个回调)。

//uploads a video to a project through the API
public function apiUpload( $tmp_filename, $project_hashed_id ) {
    $api_password = 'xxxxxxxxxx';
    $username = 'api';
    $data = array(
        'api_password'  => $api_password,
        'file'          => '@'.$tmp_filename,
        'project_id'    => $project_hashed_id
        );

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_URL, "https://upload.wistia.com" );
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);    
    curl_setopt($ch, CURLOPT_NOPROGRESS, FALSE);    
    curl_setopt($ch, CURLOPT_PROGRESSFUNCTION, array($this, 'apiUploadCallback'));  
    $result = curl_exec($ch); //***Note A***
    curl_close($ch);
    return( json_decode($result) );

}

//BE CAREFUL... PHP 5.5 Added the cURL resource as the first argument to the CURLOPT_PROGRESSFUNCTION callback 
protected function apiUploadCallback( $total_bytes_down_expected, $bytes_down_so_far, $total_bytes_up_expected, $total_bytes_up_so_far ) {
    if ($total_bytes_up_expected > 0)
        //error_log( round( ($total_bytes_up_so_far / $total_bytes_up_expected)*100) );
        echo ( round( ($total_bytes_up_so_far / $total_bytes_up_expected)*100) ); //***Note B***
}

这行得通，但如果我能向用户显示上传的实际进度，那会好得多。我已经想出如何使用回调函数计算它(参见 ***Note B***)，但我不确定如何将它传回页面(用户所在的页面)在等待)。我尝试使用 jQuery 的 uploadProgress，但它显示了文件上传到我们服务器的进度...不是上传到 API 的进度。我尝试回应 curl 回调的进度 (***Note B***) 但它吐出一系列数字，这些数字与 api 返回的 json 对象纠缠在一起 (** *Note A***)，我也需要。像这样:

11112222233344444...9898989899999999999999{api:"response mixed in here"}100100100100

如何捕获 curl 进度和后续 API 响应？

Answer 1

您可以将进度状态存储在用户的 session 中，然后使用ajax 从 session 中获取信息，然后将其显示在页面上