Italiano
Română
РусскийCarga de Archivos AJAX en WordPress - FrontEnd
He estado leyendo todos los tutoriales que he podido encontrar sobre carga de archivos AJAX desde el frontend en WordPress. Por el momento ninguno me funciona. El que tiene más sentido para mí es este: http://theaveragedev.com/wordpress-files-ajax/
Aquí está mi código:
En mi archivo de plantilla example.php
<script>var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>"</script>
<form id="file_form">
<?php wp_nonce_field('ajax_file_nonce', 'security'); ?>
<input type="hidden" name="action" value="my_file_upload">
<label for="file_upload">Es una carga de archivo...</label>
<input type="file" name="file_upload">
<input type="submit" value="Ir">
</form>Esto está en ajax-file-upload.js
jQuery(document).ready(function(){
var form_data = {};
$(this).find('input').each(function(){
form_data[this.name] = $(this).val();
});
$('#file_form').ajaxForm({
url: ajax_url, // está en el lado admin, hazlo tú mismo en el frontend
data: form_data,
type: 'POST',
contentType: 'json',
success: function(response){
alert(response.message);
}
});
});Esto está en mi functions.php
function q_scripts(){
$src = get_template_directory_uri().'/js/ajax-file-upload.js';
wp_enqueue_script('my_ajax_file_uploader_thing', $src, array('jquery', 'jquery-form'));
}
add_action('init', 'q_scripts');
function handle_file_upload(){
check_ajax_referer('ajax_file_nonce', 'security');
if(!(is_array($_POST) && is_array($_FILES) && defined('DOING_AJAX') && DOING_AJAX)){
return;
}
if(!function_exists('wp_handle_upload')){
require_once(ABSPATH . 'wp-admin/includes/file.php');
}
$upload_overrides = array('test_form' => false);
$response = array();
foreach($_FILES as $file){
$file_info = wp_handle_upload($file, $upload_overrides);
// hacer algo con la información del archivo...
$response['message'] = '¡Listo!';
}
echo json_encode($response);
die();
}He intentado agregar el enctype al elemento form y esto no funcionó. El error que sigo recibiendo es una alerta que dice 'undefined'. ¿Alguien sabe cómo puedo corregir este problema?
EDICIÓN
El problema de 'undefined' ya se ha solucionado ya que edité el archivo js para tener un evento click y cambié el selector para el bucle de entrada del formulario:
jQuery(document).ready(function($){
$('#file_form :submit').click(function() {
var form_data = {};
$('#file_form').find('input').each(function () {
form_data[this.name] = $(this).val();
});
console.log(form_data);
$('#file_form').ajaxForm({
url: ajax_url, // está en el lado admin, hazlo tú mismo en el frontend
data: form_data,
type: 'POST',
contentType: 'json',
success: function (response) {
alert(response.message);
},
error: function (response) {
console.log('error');
}
});
return false;
});
});Los archivos aún no se están subiendo a la carpeta de medios. También quiero obtener la URL de carga una vez que se haya subido.
Estoy escribiendo en la consola el objeto file para ver qué está sucediendo. Aquí hay un ejemplo:
Object {security: "e6db2a6eee", _wp_http_referer: "/chat?sessionappid=138", action: "my_file_upload", file_upload: "C:\fakepath\download.jpg", "": "Go"}¿Hay algo mal con esto y es por eso que no se está cargando?
¿Eso es una pregunta o una respuesta? Por favor no publiques volcados de código sin ninguna explicación.
fuxia
ok, hemos actualizado mi código y esta es la respuesta para el tutorial de subida de archivos AJAX en el front-end de WordPress
Adnan Limdiwala
La respuesta funciona bien. ¿Por qué esto no está marcado como respuesta correcta? Hay un error en el código js. El original era --> }error: y el correcto es }, error: (faltaba la coma después de })
Alaksandar Jesus Gene
¡Guau... Esto funcionó para mí! ¡Gracias!
Neenu Chandran
necesito una explicación
730wavy