{"id":28487,"date":"2021-05-27T14:42:00","date_gmt":"2021-05-27T11:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28487"},"modified":"2021-10-17T16:42:15","modified_gmt":"2021-10-17T13:42:15","slug":"como-integrar-la-carga-de-archivos-ajax-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-integrar-la-carga-de-archivos-ajax-en-wordpress\/","title":{"rendered":"C\u00f3mo integrar la carga de archivos Ajax en WordPress"},"content":{"rendered":"

\u00bfQuieres implementar la carga de archivos Ajax en WordPress? A veces, necesita realizar una tarea que carga un archivo a trav\u00e9s de Ajax. En este art\u00edculo, estudiamos c\u00f3mo cargar archivos Ajax en WordPress.<\/p>\n

Una ventaja de realizar la carga de archivos a trav\u00e9s de Ajax es que reduce la carga de su servidor. Su p\u00e1gina no se recargar\u00e1, lo que ahorra llamadas adicionales a un servidor y, por lo tanto, el ancho de banda. Tambi\u00e9n agrega una mejor experiencia de usuario en su sitio web.<\/p>\n

Normalmente, mientras trabajamos con Ajax, hacemos una llamada a la URL y pasamos datos u obtenemos datos de la URL especificada. WordPress tiene una forma ligeramente diferente de realizar operaciones Ajax. En WordPress, hacemos una llamada a la URL, pero el c\u00f3digo que escribimos para procesar los datos ir\u00e1 a la funci\u00f3n. Entonces esta funci\u00f3n debe mapearse con el valor de ‘acci\u00f3n’ pasado en los par\u00e1metros de Ajax. \u00bfConfundido? Ve\u00e1moslo en acci\u00f3n.<\/p>\n

Carga de archivos Ajax en WordPress<\/h3>\n

Para comenzar, necesita un formulario con la entrada del archivo. Hacemos una llamada Ajax en la selecci\u00f3n de un archivo y cargamos el archivo a un servidor. Para crear un formulario, agregue el siguiente HTML a su plantilla de p\u00e1gina.<\/p>\n

<form class=\"fileUpload\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label><?php _e('Choose File:'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"file\" accept=\"image\/*\" \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form><\/code><\/pre>\n
A continuaci\u00f3n, debe realizar una llamada Ajax en el evento de cambio de la entrada del archivo. A medida que pasamos el contenido de un archivo al Ajax, su c\u00f3digo ser\u00e1 ligeramente diferente en comparaci\u00f3n con el c\u00f3digo jQuery normal de WordPress Ajax<\/a>.<\/p>\n
Incluir archivo JS en WordPress<\/h4>\n
Primero incluyamos el archivo JS en un entorno de WordPress. Este c\u00f3digo ir\u00e1 dentro del functions.php<\/code>archivo o en un complemento espec\u00edfico del sitio.<\/p>\n
function aw_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), '1.1', true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'aw-custom', 'aw', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'aw-custom' );\n}\n\u00a0\nadd_action( 'wp_enqueue_scripts', 'aw_scripts' );<\/code><\/pre>\n
Cargar archivo en el servidor<\/h4>\n
Ya est\u00e1 listo con el formulario y el archivo JS. Ahora, agregue el c\u00f3digo a continuaci\u00f3n en el archivo JS que enviar\u00e1 el contenido del archivo al lado del servidor a trav\u00e9s de Ajax.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_data = $(this).prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\n\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\u00a0contentType: false,\n\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\u00a0data: form_data,\n\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$this.val('');\n\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}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0 \n});<\/code><\/pre>\n
La parte importante del c\u00f3digo anterior es que agregamos una acci\u00f3n ‘file_upload’ al objeto form_data. Usaremos esta acci\u00f3n ‘file_upload’ para continuar con los datos del formulario.<\/p>\n
En el functions.php<\/code>, mapee esta acci\u00f3n con el Ajax de la siguiente manera:<\/p>\n
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );\nadd_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );<\/code><\/pre>\n
Si est\u00e1 escribiendo este c\u00f3digo en un complemento, no es necesario que escriba una segunda declaraci\u00f3n. Aqu\u00ed, a ‘wp ajax_’ y ‘wp_ajax_nopriv’ agregamos el valor de acci\u00f3n que es ‘file_upload’. El segundo par\u00e1metro ‘file_upload_callback’ es el m\u00e9todo de devoluci\u00f3n de llamada que tendr\u00e1 el c\u00f3digo real para la carga de archivos.<\/p>\n
function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'], $arr_img_ext)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES[\"file\"][\"name\"], null, file_get_contents($_FILES[\"file\"][\"tmp_name\"]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Estoy usando un m\u00e9todo wp_upload_bits<\/a> para cargar archivos en un servidor. Este m\u00e9todo almacena directamente un archivo dentro del directorio wp-content \/ uploads.<\/p>\n
Contin\u00fae e intente cargar un archivo. Su archivo debe cargarse en la carpeta wp-content \/ uploads \/. Tenga en cuenta que encontrar\u00e1 su archivo en la carpeta del mes actual del directorio de cargas.<\/p>\n
Cargar varios archivos usando Ajax en WordPress<\/h3>\n
Hasta ahora hemos discutido la carga de un solo archivo a trav\u00e9s de Ajax. Puede haber una situaci\u00f3n en la que desee cargar varios archivos utilizando Ajax. Veamos c\u00f3mo lograrlo.<\/p>\n
Para cargar varios archivos, debe realizar peque\u00f1os cambios en el c\u00f3digo HTML, JS y PHP anterior.<\/p>\n
HTML proporciona un atributo ‘m\u00faltiple’ que permite al usuario seleccionar varios archivos en la entrada de archivos.<\/p>\n
c\u00f3digo HTML<\/strong><\/p>\n
<form class=\"fileUpload\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label><?php _e('Choose File:'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"file\" accept=\"image\/*\" multiple \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form><\/code><\/pre>\n
Como un usuario que va a seleccionar varios archivos, necesitamos cambiar el c\u00f3digo JavaScript que recorre cada archivo y crea una matriz a partir de \u00e9l.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_obj = $this.prop('files');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(i=0; i<file_obj.length; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file[]', file_obj[i]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\n\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\u00a0contentType: false,\n\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\u00a0data: form_data,\n\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$this.val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File(s) uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Y finalmente, en la funci\u00f3n de devoluci\u00f3n de llamada de Ajax, recorremos la matriz de archivos y cargamos cada archivo en un servidor.<\/p>\n
function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0for($i = 0; $i < count($_FILES['file']['name']); $i++) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Espero que conozca la carga de archivos Ajax en WordPress. Me gustar\u00eda escuchar sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n