Come inviare ricciolo avanzamento del caricamento di ajax per essere visualizzata

Question

Quello che sto cercando di fare è caricare le informazioni del file/file di upload.php con Ajax, poi caricare le stesse informazioni di nuovo a un server remoto per curl per remoteUpload.php. Infine nel file remoteUpload.php eseguo l'effettivo caricamento del file/dei file.

Quando si esegue il primo passaggio -> caricare le informazioni file/file su upload.php Visualizzo una barra di avanzamento di questo passaggio utilizzando ajax.

Ma quando si esegue il secondo passaggio -> caricare nuovamente le stesse informazioni sul server remoto utilizzando il ricciolo su remoteUpload.php, la barra di avanzamento non viene visualizzata e questo è il mio problema.

Come visualizzare la barra di avanzamento per il secondo passo da 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

È possibile salvare in progressCallback()-$_SESSION tuo $progress e da un lato js dopo "primo passo" altopiano corsa completa setIntevral(/*ajax*/) fare ajax richieste al server di ottenere $_SESSION['progress] e visualizzare la seconda barra di avanzamento (o caricare prima il progresso Barr sino 50% e continuano carico secondo il 50%) nella forma e quando si completa chiamata clearInterval()

---

risposta dettagliata

Spiegazione: conteremo progressi nella seguente logica .Se abbiamo caricato 5 file contemporaneamente (come nel tuo caso sembra caricato era più file) poi ci divideremo 100% da 5 e aumenterà di 25% progressi durante un file arricciatura presentare, per questo è necessario dopo 5 modifiche

1) chiamata da qualche parte sopra session_start() nella vostra upload.php se non fatto

2) Salva alla sessione contare file totale e indice di file di elaborazione corrente

// 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) salvataggio in progressCallback funzione di numero di progressi in corso in formato 0-100

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

4) creare nuovi getUploadProgress.php e tornare JSON codificato progresso infromation dalla sessione

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 nella tua chiamata alla funzione ajax.onreadystatechangesetInteval e definisci nella variabile globale 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); 
     } 
}; 

NOTA: durante l'uso di questo codice di esempio, naturalmente, ci saranno necessari ulteriore rounds, JS/PHP functions Inoltre, taratura variabile o alcuni aggiustamenti logici per una maggiore efficacia, ma in fondo questa è la logica di un'opzione che vi possibile utilizzare