{"id":28200,"date":"2021-05-22T13:48:00","date_gmt":"2021-05-22T10:48:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28200"},"modified":"2021-10-17T16:50:58","modified_gmt":"2021-10-17T13:50:58","slug":"carga-de-archivos-ajax-con-php-y-jquery","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/carga-de-archivos-ajax-con-php-y-jquery\/","title":{"rendered":"Carga de archivos Ajax con PHP y jQuery"},"content":{"rendered":"

\u00bfEst\u00e1 buscando una carga de archivos usando Ajax en PHP? Subir un archivo a trav\u00e9s de Ajax es tendencia hoy en d\u00eda. Agrega una mejor experiencia de usuario en un sitio web. En este art\u00edculo, le muestro c\u00f3mo cargar archivos a trav\u00e9s de Ajax con PHP y jQuery.<\/p>\n

La carga de archivos \/ im\u00e1genes es una tarea habitual para los desarrolladores. Hay varios casos en los que necesita crear una funci\u00f3n de carga de archivos. Algunos de los ejemplos comunes son la carga de fotos de perfil, im\u00e1genes de controles deslizantes, testimonios, portafolios, carruseles, etc.<\/p>\n

\u00bfPor qu\u00e9 es necesario cargar archivos con Ajax?<\/h3>\n

La raz\u00f3n principal para realizar la carga de archivos a trav\u00e9s de Ajax es que no desea actualizar una p\u00e1gina despu\u00e9s de cargar el archivo. Y es obvio. No tiene sentido cargar una p\u00e1gina completa si no es necesario. Si est\u00e1 cargando una p\u00e1gina despu\u00e9s de cargar un archivo, est\u00e1 agregando una carga adicional en un servidor.<\/p>\n

La carga de archivos mediante Ajax reduce la carga innecesaria en un servidor y brinda una mejor experiencia de usuario en el sitio web.<\/p>\n

Entonces, sin m\u00e1s demora, comencemos con el c\u00f3digo.<\/p>\n

Carga de archivos usando Ajax con PHP y jQuery<\/h3>\n

Comencemos por crear un formulario que tenga una entrada de archivo y el bot\u00f3n de enviar. Agregue el siguiente c\u00f3digo HTML en su archivo, por ejemplo index.php<\/code>.<\/p>\n

<form>\n\u00a0\u00a0\u00a0\u00a0<p><input type=\"file\" name=\"file\" class=\"file\" required><\/p>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" class=\"submit\" value=\"Submit\">\n<\/form><\/code><\/pre>\n
Como voy a escribir un poco de c\u00f3digo JavaScript, agregu\u00e9 la clase ‘archivo’ y ‘enviar’ a la entrada del archivo y al bot\u00f3n enviar respectivamente. Estas clases act\u00faan como un identificador de elementos de formulario.<\/p>\n
C\u00f3digo JavaScript<\/h4>\n
A continuaci\u00f3n, escriba un c\u00f3digo JavaScript que dar\u00e1 una llamada Ajax a un servidor y manejar\u00e1 la respuesta.<\/p>\n
<script src=\"https:\/\/code.jquery.com\/jquery-3.5.0.js\"><\/script>\n<script type=\"text\/javascript\">\n\u00a0\u00a0\u00a0\u00a0$(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.submit').on('click', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var file_data = $('.file').prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(file_data != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var form_data = new FormData();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: 'ajax.php',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: form_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success:function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(response == 'success') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('Something went wrong. Please try again.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.file').val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
En el c\u00f3digo JavaScript anterior, estoy enviando el contenido del ajax.php<\/code>archivo al archivo y tambi\u00e9n estoy manejando la respuesta.<\/p>\n
C\u00f3digo PHP<\/h4>\n
En esta etapa, hemos terminado con el env\u00edo del contenido del archivo al lado del servidor. Ahora cree un archivo ajax.php<\/code>donde tenemos que escribir el c\u00f3digo PHP que carga los archivos en un servidor.<\/p>\n
ajax.php<\/strong><\/p>\n
<?php\nif (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'. $_FILES['file']['name']);\n\u00a0\u00a0\necho \"success\";\ndie();<\/code><\/pre>\n
El c\u00f3digo PHP anterior primero comprueba el directorio "uploads". Si este directorio no existe, lo crea y carga el archivo dentro de esta carpeta.<\/p>\n
Espero que ahora pueda implementar f\u00e1cilmente la carga de archivos usando Ajax en su sitio web. Me gustar\u00eda escuchar sus pensamientos en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n