Carga de archivos Ajax con PHP y jQuery
¿Está buscando una carga de archivos usando Ajax en PHP? Subir un archivo a través de Ajax es tendencia hoy en día. Agrega una mejor experiencia de usuario en un sitio web. En este artículo, le muestro cómo cargar archivos a través de Ajax con PHP y jQuery.
La carga de archivos / imágenes es una tarea habitual para los desarrolladores. Hay varios casos en los que necesita crear una función de carga de archivos. Algunos de los ejemplos comunes son la carga de fotos de perfil, imágenes de controles deslizantes, testimonios, portafolios, carruseles, etc.
¿Por qué es necesario cargar archivos con Ajax?
La razón principal para realizar la carga de archivos a través de Ajax es que no desea actualizar una página después de cargar el archivo. Y es obvio. No tiene sentido cargar una página completa si no es necesario. Si está cargando una página después de cargar un archivo, está agregando una carga adicional en un servidor.
La carga de archivos mediante Ajax reduce la carga innecesaria en un servidor y brinda una mejor experiencia de usuario en el sitio web.
Entonces, sin más demora, comencemos con el código.
Carga de archivos usando Ajax con PHP y jQuery
Comencemos por crear un formulario que tenga una entrada de archivo y el botón de enviar. Agregue el siguiente código HTML en su archivo, por ejemplo index.php.
<form>
<p><input type="file" name="file" class="file" required></p>
<input type="submit" name="submit" class="submit" value="Submit">
</form>Como voy a escribir un poco de código JavaScript, agregué la clase ‘archivo’ y ‘enviar’ a la entrada del archivo y al botón enviar respectivamente. Estas clases actúan como un identificador de elementos de formulario.
Código JavaScript
A continuación, escriba un código JavaScript que dará una llamada Ajax a un servidor y manejará la respuesta.
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(function() {
$('.submit').on('click', function() {
var file_data = $('.file').prop('files')[0];
if(file_data != undefined) {
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
type: 'POST',
url: 'ajax.php',
contentType: false,
processData: false,
data: form_data,
success:function(response) {
if(response == 'success') {
alert('File uploaded successfully.');
} else {
alert('Something went wrong. Please try again.');
}
$('.file').val('');
}
});
}
return false;
});
});
</script>En el código JavaScript anterior, estoy enviando el contenido del ajax.phparchivo al archivo y también estoy manejando la respuesta.
Código PHP
En esta etapa, hemos terminado con el envío del contenido del archivo al lado del servidor. Ahora cree un archivo ajax.phpdonde tenemos que escribir el código PHP que carga los archivos en un servidor.
ajax.php
<?php
if (!file_exists('uploads')) {
mkdir('uploads', 0777);
}
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. $_FILES['file']['name']);
echo "success";
die();El código PHP anterior primero comprueba el directorio "uploads". Si este directorio no existe, lo crea y carga el archivo dentro de esta carpeta.
Espero que ahora pueda implementar fácilmente la carga de archivos usando Ajax en su sitio web. Me gustaría escuchar sus pensamientos en la sección de comentarios a continuación.
Artículos relacionados
- Cómo cargar una publicación de WordPress con AJAX
- Cómo usar jQuery Autocomplete con Ajax
- Arrastrar y soltar carga de archivos usando JavaScript y PHP