Subir varias imágenes y mostrar un progreso general

[rubiomike]

Hola a todos, estoy intentando crear un formulario en el cual se seleccionen varias imágenes y se muestre una barra de progreso que indique el estado de la subida. El problema que estoy teniendo es que consigo que las imágenes suban perfectamente al servidor, pero la barra de progreso muestra el progreso individual de cada imagen, no el total de todas. Dejo el código que uso para ver si alguien me puede guiar un poco.

El formulario en HTML

Código html:

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="upload[]" id="files" multiple><br>
    <input type="button" value="Upload File" onclick="subirArchivo()">
    <progress id="progressBar" value="0" max="100" style="width: 300px";></progress>
 
    <h3 id="estado"></h3>
    <p id="total"></p>
     <output id="resultado" />
 
</form>
 

El código Javascript

Código javascript:

function subirArchivo() {
 
    var archivos = document.getElementById("files").files;
 
    for(var i = 0; i< archivos.length; i++){
 
     var file = archivos[i];
 
    var formdata = new FormData();
    formdata.append("upload", file);
 
    var ajax = new XMLHttpRequest();
 
    ajax.upload.addEventListener("progress", progreso, false);
    ajax.addEventListener("load", operacion_completada, false);
    ajax.addEventListener("error", mensaje_error, false);
    ajax.addEventListener("abort", abortar_subida, false);
 
    ajax.open("POST", "upload_multiple_mod.php");
    ajax.send(formdata);
    } //fin for
} //fin funcion subir archivo
 
 
 
function progreso(event){
 
    document.getElementById("ltotal").innerHTML = "Subidos "+ event.loaded+" bytes de "+event.total;
 
    var percent = (event.loaded / event.total) * 100;
    document.getElementById("progressBar").value = Math.round(percent);
    document.getElementById("estado").innerHTML =Math.round(percent)+"% subiendo... por favor, espere";
 
} //fin funcion progreso
 
 
function operacion_completada(event) {
 
    document.getElementById("estado").innerHTML = event.target.responseText;
    document.getElementById("progressBar").value = 0;
 
} //fin funcion operacion_completada
 
 
 
function mensaje_error(event) {
    document.getElementById("estado").innerHTML = "Error al subir el archivo";
}//fin funcion mensaje_error
 
 
 
function abortar_subida(event) {
    document.getElementById("estado").innerHTML = "Upload Abort";
} //fin funcion abortar_subida
 

El PHP en el servidor

Código php:

for($i=0; $i<count($_FILES['upload']['name']); $i++) {
 
  $ruta_temporal = $_FILES['upload']['tmp_name'];
 
  
  if ($ruta_temporal != ""){
    
    $nueva_ruta = "uploads/" . $_FILES['upload']['name'];
 
    
    if(move_uploaded_file($ruta_temporal, $nueva_ruta)) {
 
        echo $_FILES['upload']['name']."<br>";
 
    }
 
  }
}
 

Alguien me puede echar una mano?

Gracias a todos

[carlosedu_net]

Amigo me puedes pasar ese ejemplo completo para poder probarlo en mi proyecto. Por favor

[Triby]

En Javascript tienes un for para ir subiendo cada archivo y necesitarías:

- Antes del for: Crear una variable para almacenar el total de bytes a subir y otra para el total subido

- En la función progreso actualizar el total de bytes subidos y llamar a una función para mostrar el progreso general