Mostrar el progreso al Subir imagenes con Ajax y PHP

Mostrar el progreso o avance al subir imágenes es muy útil sobre todo cuando son archivos muy grandes.

Si tienen pensado subir archivos muy pesados a su servidor la primera recomendación seria modificar el limite del tamaño de archivos a subir, por default es de 2Mb, esto se soluciona modificando el archivo php.ini y modificar los parámetros siguientes:

; Maximum allowed size for uploaded files.
upload_max_filesize = 64M

; Must be greater than or equal to upload_max_filesize
post_max_size = 64M

Aquí asignamos el tamaño para los archivos y para el metodo POST, le asignamos 64Mb de limite.

Formulario para subir archivos

Ahora veamos el formulario para subir archivos.

<form id="upload_image" method="post" action="upload.php" enctype="multipart/form-data">
  <div class="form-group">
    <label for="exampleInputFile">Imagen</label>
    <input type="file" id="image" name="image" required>
  </div>
  <div class="xprogress"></div>
  <button type="submit" class="btn btn-primary">Subir imagen</button>
</form>

Es un formulario básico que contiene un action al archivo upload.php, un input tipo file/archivo, un botón de submit y tenemos un <div class=”xprogress”></div> que sirve para mostrar el progreso de la subida.

Script Js para procesar archivos y mostrar el progreso

Para manejar la subida de archivos vamos a usar el siguiente código en javascript.

    $('#upload_image').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
                $("#image").val("");

            },
            error: function(data){
                console.log("error");
                console.log(data);
            },
            xhr: function() {
              var xhr = new window.XMLHttpRequest();

              xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                  var percentComplete = evt.loaded / evt.total;
                  percentComplete = parseInt(percentComplete * 100);
                  console.log(percentComplete);
                  $(".xprogress").html("Progreso: "+ percentComplete +"%");

                  if (percentComplete === 100) {

                  }

                }
              }, false);

              return xhr;
            },

        });

    }));

Este es un script muy similar al que les explique en el articulo sobre subir archivos o imagenes con ajax.

La gran diferencia empieza en las lineas 22 a la 40,  nos permite crear un XMLHttpRequest personalizado donde  agregamos  el proceso que nos permite tener el control del porcentaje de subida.

En las lineas 25 a la 38 creamos un listener que usa el evento “progress” para indicarnos cuando el progreso/avance de la subida cambie.

En la linea 27 calculamos el porcentaje de subida dividiendo los bytes subidos (entre) / los bytes totales.

En la linea 28 multiplicamos por 100 para tener el resultado en base 100.

En la linea 30 hacemos referencia a el contenedor <div class=”xprogress”></div>, con el codigo $(“.xprogress”).html(“Progreso: “+ percentComplete +”%”) modificamos el contenido del contenedor y agregamos el texto del progreso/avance de la subida.

Script PHP para subir archivos

Para guardar el archivo seleccionado en el servidor usamos el siguiente script php muy simple, el archivo debe llamarse upload.php que esta definido en el action del formulario:

include "class.upload.php";

  $handle = new Upload($_FILES["image"]);
  if ($handle->uploaded) {
    $handle->Process("uploads/");
    if ($handle->processed) {

    } else {
      echo 'Error: ' . $handle->error;
    }
  } else {
    echo 'Error: ' . $handle->error;
  }
  unset($handle);

Es necesario incluir la librería class.upload.php (se incluye en el archivo de descarga)

Las imágenes se guardan en la carpeta uploads/

Descargar

Aquí les dejo el código completo del ejemplo:

Link: Descargar Codigo de Ejemplo

Cualquier duda o sugerencia pueden escribirla en los comentarios o en la pagina de contacto.