如何用AJAX显示PHP卷曲进度

2019年7月21日 226次阅读

我正在使用
CakePHP框架(v2.x)编写PHP Web应用程序.在我的一个观点中,有一个表格可将大视频文件上传到第三方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密钥暴露给客户端,我将表单提交给控制器操作,该操作使用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***
}

这可行,但如果我能向用户显示上传的实际进度会更好.我已经弄清楚如何使用回调函数来计算它(参见***注释B ***),但我不知道如何将其传递回页面(用户正在等待的位置).我尝试使用jQuery的uploadProgress,但它显示了文件上传到我们服务器的进度…而不是上传到API的进度.我尝试回应curl回调的进度(***注意B ***),但是它吐出一系列数字,这些数字与api返回的json对象纠缠在一起(*** Note A ***),我还需要.像这样的东西：

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

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

最佳答案 您可以将进度状态存储在用户的会话中,然后使用ajax从会话中获取信息,然后在页面上显示

点赞