Wie locken Upload Fortschritt an Ajax zur Anzeige gesendet werden

Question

Was ich versuche, ist die Datei/Dateien Informationen zu upload.php mit Ajax hochladen, dann die gleichen Informationen erneut auf einen Remote-Server durch curl auf remoteUpload.php hochladen. Schließlich in remoteUpload.php Datei Ich führe den tatsächlichen Upload der Datei/Dateien.

Wenn Sie den ersten Schritt -> Upload der Datei/Dateien Informationen zu upload.php Ich zeige eine Fortschrittsanzeige dieses Schrittes mit Ajax.

Aber wenn im zweiten Schritt -> die gleichen Informationen erneut auf den Remote-Server mit Curl zu remoteUpload.php hochladen wird der Fortschrittsbalken nicht angezeigt, und das ist mein Problem.

Wie die Fortschrittsbalken von Ajax für die zweite Stufe angezeigt werden?

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

Sie können in progressCallback() speichern zu $_SESSION Ihre $progress und von js Seite nach „ersten Schritt“ Berg kompletten Durchlauf setIntevral(/*ajax*/)ajax Anfragen an den Server machen $_SESSION['progress] erhalten und zweiten Fortschrittsbalken angezeigt (oder erste Fortschritte laden barr bis 50% und weiter Last zweiten 50% in der Form), und wenn es vollständig Anruf clearInterval()

---

GENAUE ANTWORT

Erläuterung: werden wir Fortschritte in folgenden Logik zählen .Wenn wir 5 Dateien auf einmal hochgeladen haben (wie in Ihrem Fall hochgeladen scheint war Multi-Datei), dann werden wir 100% durch 5 teilen und wird von 25% Fortschritt während einer Datei erhöhen curl einreichen, dafür brauchen Sie folgende 5 Modifikationen

1) Anruf irgendwo über session_start() in Ihrem upload.php, wenn es nicht

2) speichern, um Sitzungsgesamt Dateien zählen und Index aktueller Verarbeitungsdatei durchgeführt

// 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)

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

4) in 0-100 Format in progressCallback Funktion aktueller Fortschritt Nummer speichern neue getUploadProgress.php erstellen und json codierten Fortschritt infromation von Sitzung

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) Add zurückzukehren in Ihrem ajax.onreadystatechangesetInteval Funktionsaufruf und definieren Sie in Ihrer js globalen Variable 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); 
     } 
}; 

HINWEIS: während der Verwendung dieses Beispiels Code natürlich wird es rounds, zusätzlich benötigt werden JS/PHP functions hinaus variable Einstellungen oder einige logische Anpassungen für mehr Effizienz, aber im Grunde ist diese Logik einer Option, die Sie kann