Come integrare il caricamento di file Ajax in WordPress
Vuoi implementare il caricamento di file Ajax in WordPress? A volte, è necessario eseguire un’attività che carica un file tramite Ajax. In questo articolo, studiamo come eseguire il caricamento di file Ajax in WordPress.
Un vantaggio del caricamento di file tramite Ajax è che riduce il carico del server. La tua pagina non si ricaricherà, risparmiando chiamate extra a un server e quindi la larghezza di banda. Aggiunge anche una migliore esperienza utente sul tuo sito web.
Normalmente mentre lavoriamo con Ajax, diamo una chiamata all’URL e passiamo o otteniamo dati dall’URL specificato. WordPress ha un modo leggermente diverso di eseguire operazioni Ajax. In WordPress, chiamiamo l’URL ma il codice che scriviamo per elaborare i dati andrà nella funzione. Quindi questa funzione deve essere mappata con il valore "action" passato nei parametri Ajax. Confuso? Vediamolo in azione.
Caricamento di file Ajax in WordPress
Per iniziare, è necessario un modulo con l’input del file. Diamo una chiamata Ajax sulla selezione di un file e carichiamo il file su un server. Per creare un modulo, aggiungi l’HTML sottostante al tuo modello di pagina.
<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>Successivamente, devi dare una chiamata Ajax sull’evento di modifica dell’input del file. Poiché stiamo passando un contenuto di file ad Ajax, il tuo codice sarà leggermente diverso rispetto al normale codice jQuery di WordPress Ajax.
Includi file JS in WordPress
Per prima cosa includiamo il file JS in un ambiente WordPress. Questo codice andrà all’interno del functions.phpfile o in un plug-in specifico del sito.
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' );Carica file sul server
Sei pronto con il modulo e il file JS. Ora aggiungi il codice seguente nel file JS che invierà il contenuto del file al lato server tramite 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 codice sopra è che aggiungiamo un’azione ‘file_upload’ all’oggetto form_data. Useremo questa azione ‘file_upload’ per procedere con i dati del modulo.
In functions.php, mappa questa azione con l’Ajax come segue:
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );Se stai scrivendo questo codice in un plugin, non hai bisogno di scrivere una seconda istruzione. Qui a ‘wp ajax_’ e ‘wp_ajax_nopriv ‘ aggiungiamo il valore dell’azione che è ‘file_upload’. Il secondo parametro ‘file_upload_callback’ è il metodo di callback che avrà il codice effettivo per il caricamento del file.
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();
}Sto usando un metodo wp_upload_bits per caricare file su un server. Questo metodo memorizza direttamente un file all’interno della directory wp-content/uploads.
Vai avanti e prova a caricare un file. Il tuo file dovrebbe essere caricato nella cartella wp-content/uploads/. Tieni presente che troverai il tuo file nella cartella del mese corrente della directory dei caricamenti.
Carica più file usando Ajax in WordPress
Finora abbiamo discusso del caricamento di un singolo file tramite Ajax. Potrebbe verificarsi una situazione in cui desideri caricare più file utilizzando Ajax. Vediamo come realizzarlo.
Per caricare più file, è necessario apportare lievi modifiche al codice HTML, JS e PHP di cui sopra.
L’HTML fornisce un attributo ‘multiplo’ che consente a un utente di selezionare più file sull’input del file.
Codice 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>Poiché un utente seleziona più file, è necessario modificare il codice JavaScript che scorre attraverso ciascun file e ne crea un array.
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.');
}
});
});
});E infine, nella funzione di callback Ajax, eseguiamo un ciclo attraverso l’array di file e carichiamo ogni file su un server.
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();
}Spero che tu sappia del caricamento di file Ajax in WordPress. Mi piacerebbe sentire i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.
articoli Correlati
- Come caricare i post di WordPress con AJAX
- Come utilizzare jQuery Ajax in WordPress
- Trascina e rilascia il caricamento di file utilizzando JavaScript e PHP