Как отправить ход выполнения curl в ajax для отображения

Question

Что я пытаюсь сделать, это загрузить информацию о файлах/файлах в upload.php с помощью ajax, а затем снова загрузить ту же информацию на удаленный сервер с помощью 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; 
} 

PHP: (upload.php)

function progressCallback($dltotal, $dlnow, $ultotal, $ulnow) { 
    static $last; 
    $progress = @round($ulnow/$ultotal * 100); 
    if($last < $progress) echo json_encode(array('text' => $progress)); 
    flush(); 
    $last = $progress; 
} 

if (strtolower($_SERVER['REQUEST_METHOD']) == 'post' && !empty($_FILES)) { 
    foreach ($_FILES['file']['tmp_name'] as $index => $tmpFileName) { 
     if ($_FILES['file']['error'][$index] > 0) { 
      $text = "A file did not uploaded correctly."; 
      return false; 
     } 

     $ch = curl_init("http://serverfiles/remoteUpload.php"); 
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
     curl_setopt($ch, CURLOPT_NOPROGRESS, false); 
     curl_setopt($ch, CURLOPT_PROGRESSFUNCTION, 'progressCallback'); 
     curl_setopt($ch, CURLOPT_POST, true); 
     curl_setopt($ch, CURLOPT_POSTFIELDS, array('fileupload' => '@' . $tmpFileName)); 
     $text = curl_exec($ch); 
    } 
} 
echo json_encode(array('text' => $text)); 
exit; 

PHP: (remoteUpload.php)

if (move_uploaded_file($_FILES['fileupload']['tmp_name'], "files/" . $_FILES['fileupload']['name'])) 
    echo "The file has been uploaded."; 
else 
    echo "error"; 

Answer 1

Вы можете сохранить в progressCallback(), чтобы $_SESSION вашего $progress и с Js стороны после «первого шага» возвышенность полного выполнения setIntevral(/*ajax*/) сделать ajax запросов к серверу получить $_SESSION['progress] и отображение второго индикатора прогресса (или загружать первый ход Барра до 50% и продолжают загрузку второго 50%) в вашей форме и когда завершить вызов clearInterval()

---

развернутый ответ

Объяснение: мы будем отсчитывать прогресс в следующей логике ,Если мы загрузили 5 файлов одновременно (как в вашем случае, кажется, закачанный был мульти-файл), то мы будем делить 100% на 5 и увеличится на 25% прогресс в течение одного файла локон представить, для этого вам нужно следующие 5 модификаций

1) вызов где-то выше session_start() в вашем upload.php, если это не сделано

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 функции текущего номера прогресса в формате 0-100

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) надстройкой в вашем 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); 
     } 
}; 

Примечание: во время использования этого кода примера, конечно, будут необходимы дополнительные rounds, JS/PHP functions Кроме того, переменная корректировки или некоторые логические настройки для большей эффективности, но в основном это логика один вариант, который вам может использовать