✅ Noticias, temas, complementos de WEB y WordPress. Aquí compartimos consejos y las mejores soluciones para sitios web.

Carga de archivos Ajax con PHP y jQuery

650

¿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

Fuente de grabación: artisansweb.net

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More