Javascript 如何将curl上传进度发送到要显示的ajax

我尝试使用ajax将文件信息上传到

upload.php

，然后通过curl将相同的信息再次上传到远程服务器

remoteUpload.php

。最后，在

remoteUpload.php

文件中，我执行文件的实际上载

在执行第一步->将文件/文件信息上载到

upload.php

时，我使用ajax显示该步骤的进度条

但是，当执行第二步->使用curl to

remoteUpload.php将相同的信息再次上载到远程服务器时，不会显示进度条，这就是我的问题


如何通过ajax显示第二步的进度条？

Javascript:

var upload_btn = document.getElementById('upload_file');
var result = document.getElementById('result');

upload_btn.onclick = function () {
    var uploadInput = document.getElementsByName('file[]')[0];
    if (uploadInput.files.length > 0) {
        console.clear();
        var ajax = new XMLHttpRequest();
        var inputFileData = formData(uploadInput);
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                var json = JSON.parse(ajax.responseText);
                result.innerHTML = json.text;
            }
        };
        ajax.upload.addEventListener('progress', function (e) {
            result.innerHTML = Math.round(e.loaded / e.total * 100) + "%";
        });
        ajax.open("post", "upload.php");
        ajax.send(inputFileData);
    }
};

function formData(inputFileObj) {
    var formData = new FormData;
    var inputFile = inputFileObj.files;
    if (inputFile.length > 0) {
        for (i = 0; i < inputFile.length; i++) {
            formData.append(inputFileObj.name, inputFile[i]);
        }
    }
    return formData;
}

您可以将
progressCallback（）（或者在表单中加载第一个进度barr直到50%，然后继续加载第二个50%），并在完成调用时调用
clearInterval（）


详细答案

说明：我们将按照以下逻辑计算进度。如果我们一次上载了5个文件（在您的案例中，似乎上载了多个文件），那么我们将
100%
除以
5
，并在一次提交文件期间增加
25%
进度，为此您需要进行以下5次修改

1）在
upload.php中调用
session\u start（）上面的某个地方

2）保存到会话总文件数和当前处理文件索引

// Saveing total amount of uploaded files
$_SESSION['UP_total_count'] = count($_FILES['file']);    
foreach ($_FILES['file']['tmp_name'] as $index => $tmpFileName) {
    ...
    // Saving current index of uploaded file
    $_SESSION['UP_current_index'] = ($index+1);//+1 as it starts from 0
}

3）以
progressCallback
格式保存当前进度编号

function progressCallback($dltotal, $dlnow, $ultotal, $ulnow) { 
    ...
    $_SESSION['UP_current_progress'] = $progress;
}

4）新建
getUploadProgress.php
并从会话返回json编码的进度信息

session_start();
echo json_encode( array(
   'total_count' => $_SESSION['UP_total_count'],
   'current_index' => $_SESSION['UP_current_index'],
   'current_progress' => $_SESSION['UP_current_progress'],
) );

5）添加您的
ajax.onreadystatechange
setInteval
函数调用，并在js全局变量中定义
progressSetInterval

....
var progressSetInterval = null;// Global

ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            ...
            progressSetInterval = setInterval(function(){ 
                $.ajax({
                   type: "POST",
                   url: "getUploadProgress.php",
                   success: function(data){

                       // Calculating progress based on 100 25 logic explained above
                       var progressPart = 100 / data['total_count'];
                       var currProgress = 
                           (data['total_count'] - data['current_index']) * progressPart;

                       currProgress += (progressPart/100) * data['current_progress'];

                       // You can display progress somehow, apped to div or show prgoress...
                       console.log( "Second progress: " + currProgress);

                       // if currProgress is 100% removing setinterval
                       if( currProgress >= 100 ){
                           clearInterval( progressSetInterval );
                       }
                   },
                   dataType: 'json'
               });
            }, 1000);
        }
};

注意：在使用此示例代码的过程中，当然需要额外的
回合
，
JS/PHP函数
添加、变量调整或一些逻辑调整，以提高效率，但基本上这是一个选项的逻辑，您可以使用
谢谢，但是如何在我的代码上应用你的话呢？好的，我试着尽可能匹配在基本示例上解释它，在详细回答后检查代码不幸的是，进度没有出现，但它等待它完成，然后直接打印100%。实际上从这一点上我帮不了你，你既不应该用新代码更新你的问题，也不应该创建php FIDLE，也不应该调试它，在php和js中的不同位置进行转储，以查看会话中的内容，在js中得到什么，在js中得到什么，进度如何，计算js等等。。。或者，您可以将日志记录放在php文件中（以避免通过转储和退出中断上载流），例如，您可以放入
progressCallback
此登录
file\u put\u内容（“PATH/progress.log”，json\u encode（$progress）。“\n”，file\u APPEND）
session_start();
echo json_encode( array(
   'total_count' => $_SESSION['UP_total_count'],
   'current_index' => $_SESSION['UP_current_index'],
   'current_progress' => $_SESSION['UP_current_progress'],
) );

....
var progressSetInterval = null;// Global

ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            ...
            progressSetInterval = setInterval(function(){ 
                $.ajax({
                   type: "POST",
                   url: "getUploadProgress.php",
                   success: function(data){

                       // Calculating progress based on 100 25 logic explained above
                       var progressPart = 100 / data['total_count'];
                       var currProgress = 
                           (data['total_count'] - data['current_index']) * progressPart;

                       currProgress += (progressPart/100) * data['current_progress'];

                       // You can display progress somehow, apped to div or show prgoress...
                       console.log( "Second progress: " + currProgress);

                       // if currProgress is 100% removing setinterval
                       if( currProgress >= 100 ){
                           clearInterval( progressSetInterval );
                       }
                   },
                   dataType: 'json'
               });
            }, 1000);
        }
};