Cargar archivos usando JavaScript Ajax. Si desea implementar la carga de un archivo usando AJAX y también necesita mostrar una barra de progreso durante la carga, ha llegado al lugar correcta.
En este tutorial contiene un ejemplo completo para la carga de archivos AJAX usando JavaScript nativo con una barra de progreso que nos indica el fin de la carga.
Ventajas de la carga de archivos con AJAX
- Una carga de archivos basada en AJAX es un requisito necesario para una aplicación web.
- Nos informa en tiempo real como va la carga de archivo hasta llegar al 100%
- Evita recargar la página y trabaja de manera interna para no saturar el servidor.
Para que sirve este método de carga de archivos?
Es para proporcionar una función de trabajo en línea con el contenido del archivo cargado. Por ejemplo, se pueden realizar las siguientes tareas utilizando el método de carga de archivos AJAX.
- Actualización de foto o banner en la página de perfil.
- Importe archivos CSV o Excel para cargar contenido en las tablas de datos.
- Actualización de documentos PDF y/o ficheros comprimidos
Cargar archivos usando JavaScript Ajax
A continuación, veremos varios pasos para lograr la carga de archivos con JavaScript
Formulario de carga HTML
Necesitamos de un archivo HTML donde mostrara la entrada para elegir un archivo. Por lo tanto, este formulario tiene un botón que asigna su evento de clic con un controlador y llamada al AJAX.
Agregaremos a este HTML un contenedor para mostrar la barra de progreso. Una vez que el progreso se completa al 100 %, se agrega un mensaje de éxito o falla según la respuesta del PHP para la interfaz de usuario sin actualizar la página.
<div class="container mt-4">
<div class="card">
<div class="card-header"> Carga de archivos JavaScript </div>
<div class="card-body">
<p>Seleccione imagen:</p>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="fileUpload" name="filename">
<label class="custom-file-label" for="customFile">Seleccione imagen</label>
</div>
<br>
<br>
<button class="btn btn-primary" onclick="uploadFile()">Cargar imagen</button>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>
</div>
<br>
<div id="uploadStatus"></div>
</div>
</div>
</div>
<script>
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>Solicitud de carga de archivos AJAX con barra de progreso
Esta sección es el núcleo de carga, este código de ejemplo. Los archivos HTML y PHP de este ejemplo prevalecen, como se ve en cualquier ejemplo de carga de archivo.
El siguiente script sigue los pasos para lograr la carga del archivo AJAX.
- Lee el archivo binario elegido en el campo de entrada del archivo.
- Instancia JavaScript FormData y agrega el archivo binario en él.
- Crea un identificador XMLHttpRequest.
- Este identificador usa la propiedad ‘cargar’ para obtener el objeto XMLHttpRequestUpload.
- Este objeto XMLHttpRequestUpload realiza un seguimiento del progreso de carga en porcentaje.
- Crea detectores de eventos para actualizar el porcentaje de progreso y el estado de carga.
- Luego, finalmente, publica el archivo en el punto final de PHP como la programación habitual de AJAX.
<script>
function uploadFile() {
var fileInput = document.getElementById('fileUpload');
var file = fileInput.files[0];
if (file) {
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percent = Math.round((event.loaded / event.total) * 100);
var progressBar = document.getElementById('progressBar');
progressBar.style.width = percent + '%';
progressBar.innerHTML = percent + '%';
}
});
xhr.addEventListener('load', function(event) {
var uploadStatus = document.getElementById('uploadStatus');
uploadStatus.innerHTML = event.target.responseText;
});
xhr.open('POST', 'upload.php', true);
xhr.send(formData);
}
}
</script>Cargar con PHP para mover el archivo cargado a un directorio
Esta sección de código PHP tiene un estándar para almacenar el archivo cargado en una carpeta usando PHP move_uploaded_file(). El enlace tiene el código si desea almacenar el archivo cargado y guardar la ruta a la base de datos.
A la hora de cargar este código PHP agrega un nombre único para el nombre del archivo antes de cargarlo. Es una buena práctica de programación, pero el código también funcionará sin ella.
El uso de esta opción es para detener la sobre escritura de archivos en caso de cargar diferentes archivos con el mismo nombre.
Nota: Cree una carpeta llamada «uploads» en la raíz del proyecto. y dar suficientes permisos de escritura a esta carpeta.
<?php
error_reporting(0);
// Recibimos la informacion enviada por ajax
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
$file = $_FILES['file'];
// el archivo se cargará en la siguiente carpeta
// debe otorgar suficientes permisos de archivo
$uploadDir = 'uploads/';
// nombre de archivo único generado
$fileName = uniqid() . '_' . $file['name'];
// mover el archivo cargado desde la ubicación temporal a nuestra ubicación de destino
if (move_uploaded_file($file['tmp_name'], $uploadDir . $fileName)) {
echo '<div class="alert alert-success" role="alert">El archivo ha subido correctamente.</div>';
} else {
echo '<div class="alert alert-danger" role="alert">Fallo la carga de archivo.</div>';
}
}Conclusiones y recomendaciones
En cualquier proyecto web o página web en algún momento se requerirá la carga de archivos y/o imagen. Recuenten que en este articulo lo estamos haciendo con AJAX JavaScript que es muy recomendado porque no recarga la página.
Además, hemos incorporado una barra de progreso para informar al usuario final cómo va la carga si son archivos grandes.
Recuerden que pueden almacenar el nombre del archivo en una base de datos y lo hemos explicado en el siguiente artículo.
Ver Demostración
