Cómo integrar la carga de archivos Ajax en WordPress
¿Quieres implementar la carga de archivos Ajax en WordPress? A veces, necesita realizar una tarea que carga un archivo a través de Ajax. En este artículo, estudiamos cómo cargar archivos Ajax en WordPress.
Una ventaja de realizar la carga de archivos a través de Ajax es que reduce la carga de su servidor. Su página no se recargará, lo que ahorra llamadas adicionales a un servidor y, por lo tanto, el ancho de banda. También agrega una mejor experiencia de usuario en su sitio web.
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ódigo que escribimos para procesar los datos irá a la función. Entonces esta función debe mapearse con el valor de ‘acción’ pasado en los parámetros de Ajax. ¿Confundido? Veámoslo en acción.
Carga de archivos Ajax en WordPress
Para comenzar, necesita un formulario con la entrada del archivo. Hacemos una llamada Ajax en la selección de un archivo y cargamos el archivo a un servidor. Para crear un formulario, agregue el siguiente HTML a su plantilla de página.
<form class="fileUpload" enctype="multipart/form-data">
<div class="form-group">
<label><?php _e('Choose File:'); ?></label>
<input type="file" id="file" accept="image/*" />
</div>
</form>A continuación, 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ódigo será ligeramente diferente en comparación con el código jQuery normal de WordPress Ajax.
Incluir archivo JS en WordPress
Primero incluyamos el archivo JS en un entorno de WordPress. Este código irá dentro del functions.phparchivo o en un complemento específico del sitio.
function aw_scripts() {
// Register the script
wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), '1.1', true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
);
wp_localize_script( 'aw-custom', 'aw', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'aw-custom' );
}
add_action( 'wp_enqueue_scripts', 'aw_scripts' );Cargar archivo en el servidor
Ya está listo con el formulario y el archivo JS. Ahora, agregue el código a continuación en el archivo JS que enviará el contenido del archivo al lado del servidor a través de Ajax.
custom.js
jQuery(function($) {
$('body').on('change', '#file', function() {
$this = $(this);
file_data = $(this).prop('files')[0];
form_data = new FormData();
form_data.append('file', file_data);
form_data.append('action', 'file_upload');
$.ajax({
url: aw.ajaxurl,
type: 'POST',
contentType: false,
processData: false,
data: form_data,
success: function (response) {
$this.val('');
alert('File uploaded successfully.');
}
});
});
});La parte importante del código anterior es que agregamos una acción ‘file_upload’ al objeto form_data. Usaremos esta acción ‘file_upload’ para continuar con los datos del formulario.
En el functions.php, mapee esta acción con el Ajax de la siguiente manera:
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );Si está escribiendo este código en un complemento, no es necesario que escriba una segunda declaración. Aquí, a ‘wp ajax_’ y ‘wp_ajax_nopriv’ agregamos el valor de acción que es ‘file_upload’. El segundo parámetro ‘file_upload_callback’ es el método de devolución de llamada que tendrá el código real para la carga de archivos.
function file_upload_callback() {
$arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
if (in_array($_FILES['file']['type'], $arr_img_ext)) {
$upload = wp_upload_bits($_FILES["file"]["name"], null, file_get_contents($_FILES["file"]["tmp_name"]));
//$upload['url'] will gives you uploaded file path
}
wp_die();
}Estoy usando un método wp_upload_bits para cargar archivos en un servidor. Este método almacena directamente un archivo dentro del directorio wp-content / uploads.
Continúe e intente cargar un archivo. Su archivo debe cargarse en la carpeta wp-content / uploads /. Tenga en cuenta que encontrará su archivo en la carpeta del mes actual del directorio de cargas.
Cargar varios archivos usando Ajax en WordPress
Hasta ahora hemos discutido la carga de un solo archivo a través de Ajax. Puede haber una situación en la que desee cargar varios archivos utilizando Ajax. Veamos cómo lograrlo.
Para cargar varios archivos, debe realizar pequeños cambios en el código HTML, JS y PHP anterior.
HTML proporciona un atributo ‘múltiple’ que permite al usuario seleccionar varios archivos en la entrada de archivos.
código HTML
<form class="fileUpload" enctype="multipart/form-data">
<div class="form-group">
<label><?php _e('Choose File:'); ?></label>
<input type="file" id="file" accept="image/*" multiple />
</div>
</form>Como un usuario que va a seleccionar varios archivos, necesitamos cambiar el código JavaScript que recorre cada archivo y crea una matriz a partir de él.
custom.js
jQuery(function($) {
$('body').on('change', '#file', function() {
$this = $(this);
file_obj = $this.prop('files');
form_data = new FormData();
for(i=0; i<file_obj.length; i++) {
form_data.append('file[]', file_obj[i]);
}
form_data.append('action', 'file_upload');
$.ajax({
url: aw.ajaxurl,
type: 'POST',
contentType: false,
processData: false,
data: form_data,
success: function (response) {
$this.val('');
alert('File(s) uploaded successfully.');
}
});
});
});Y finalmente, en la función de devolución de llamada de Ajax, recorremos la matriz de archivos y cargamos cada archivo en un servidor.
function file_upload_callback() {
$arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
for($i = 0; $i < count($_FILES['file']['name']); $i++) {
if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {
$upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));
//$upload['url'] will gives you uploaded file path
}
}
wp_die();
}Espero que conozca la carga de archivos Ajax en WordPress. Me gustaría escuchar sus pensamientos y sugerencias 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 Ajax en WordPress
- Arrastrar y soltar carga de archivos usando JavaScript y PHP