Español
Română
РусскийCaricamento File AJAX WordPress - FrontEnd
Ho letto tutti i tutorial che ho trovato sul caricamento file AJAX in WordPress lato frontend. Al momento nessuno funziona per me. Quello che mi sembra più sensato è questo: http://theaveragedev.com/wordpress-files-ajax/
Ecco il mio codice:
Nel mio file template 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">È un caricamento file...</label>
<input type="file" name="file_upload">
<input type="submit" value="Vai">
</form>
Questo è in 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, // lato admin, da implementare sul frontend
data: form_data,
type: 'POST',
contentType: 'json',
success: function(response){
alert(response.message);
}
});
});
Questo è nel mio 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);
// fai qualcosa con le informazioni del file...
$response['message'] = 'Fatto!';
}
echo json_encode($response);
die();
}
add_action('wp_ajax_my_file_upload', 'handle_file_upload');
Ho provato ad aggiungere l'enctype all'elemento form ma non ha funzionato. L'errore che continuo a ricevere è un alert che dice 'undefined'. Qualcuno sa come posso correggere questo problema?
MODIFICA
Il problema 'undefined' è stato risolto modificando il file js per avere un evento click e cambiando il selettore per il loop degli input del form:
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, // lato admin, da implementare sul frontend
data: form_data,
type: 'POST',
contentType: 'json',
success: function (response) {
alert(response.message);
},
error: function (response) {
console.log('errore');
}
});
return false;
});
});
I file non vengono ancora caricati nella cartella media. Inoltre, vorrei ottenere l'URL del file caricato una volta completato l'upload.
Sto scrivendo sulla console l'oggetto file per vedere cosa succede. Ecco un esempio:
Object {security: "e6db2a6eee", _wp_http_referer: "/chat?sessionappid=138", action: "my_file_upload", file_upload: "C:\fakepath\download.jpg", "": "Go"}
C'è qualcosa di sbagliato in questo e per questo motivo non sta caricando?
È una domanda o una risposta? Per favore non postare dump di codice senza alcuna spiegazione.
fuxia
ok abbiamo aggiornato il mio codice e questa è la risposta per il tutorial su come caricare file via AJAX in WordPress front-end
Adnan Limdiwala
La risposta funziona bene. Perché non è stata segnata come risposta corretta? C'è un errore nel codice js. L'originale era --> }error: e quello corretto è }, error: (mancava la virgola dopo })
Alaksandar Jesus Gene
Wow.. Questo ha funzionato per me! Grazie!
Neenu Chandran
ho bisogno di una spiegazione
730wavy