Caricamento dell'immagine in evidenza dal front-end

7 mar 2011, 22:33:26
Visualizzazioni: 23.2K
Voti: 9

Vorremmo permettere agli utenti di caricare l'immagine in evidenza durante la modifica dei post. Come si potrebbe realizzare questo? Immagino che si dovrebbero utilizzare le funzioni AJAX di WordPress.

Qualche idea,

Marvellous

0
Tutte le risposte alla domanda 1
8
25

Caricare file in ajax è un po' complicato perché non è possibile farlo utilizzando l'oggetto XMLHttpRequest del browser, quindi è necessario utilizzare qualche plugin per il caricamento Ajax e il più semplice è il JQuery Form Plugin che semplifica molto le cose ed è incluso in WordPress. Per usarlo bisogna accodarlo:

add_action('wp_print_scripts','include_jquery_form_plugin');
function include_jquery_form_plugin(){
    if (is_page('12')){ // aggiungilo solo nella pagina che permette il caricamento
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'jquery-form',array('jquery'),false,true ); 
    }
}

in quella pagina aggiungi il form di upload e il JQuery per chiamare il JQuery Form plugin, ad esempio:

<form id="thumbnail_upload" method="post" action="#" enctype="multipart/form-data" >
  <input type="file" name="thumbnail" id="thumbnail">
  <input type='hidden' value='<?php wp_create_nonce( 'upload_thumb' ); ?>' name='_nonce' />
  <input type="hidden" name="post_id" id="post_id" value="POSTID">
  <input type="hidden" name="action" id="action" value="my_upload_action">
  <input id="submit-ajax" name="submit-ajax" type="submit" value="upload">
<form>
<div id="output1"></div>
<script>
$(document).ready(function() { 
    var options = { 
        target:        '#output1',      // elemento/i target da aggiornare con la risposta del server 
        beforeSubmit:  showRequest,     // callback pre-invio 
        success:       showResponse,    // callback post-invio 
        url:    ajaxurl                 // dalla versione 2.8 ajaxurl è sempre definito nell'header di admin e punta a admin-ajax.php     
    }; 

    // associa il form usando 'ajaxForm' 
    $('#thumbnail_upload').ajaxForm(options); 
});
function showRequest(formData, jqForm, options) {
//fai operazioni aggiuntive prima dell'invio come disabilitare il pulsante di invio
$('#output1').html('Invio in corso...');
$('#submit-ajax').attr("disabled", "disabled");
}
function showResponse(responseText, statusText, xhr, $form)  {
//fai operazioni aggiuntive dopo l'invio
}
</script>

devi sostituire POSTID con l'ID effettivo del post. poi crea la funzione Ajax per accettare il caricamento del file e aggiornare la miniatura del post

//aggancia la chiamata Ajax
//per utenti loggati
add_action('wp_ajax_my_upload_action', 'my_ajax_upload');
//per utenti non loggati
add_action('wp_ajax_nopriv_my_upload_action', 'my_ajax_upload');

function my_ajax_upload(){
//semplice controllo di sicurezza
    check_ajax_referer('upload_thumb');

//ottieni i dati POST
    $post_id = $_POST['post_id'];

//includi i file necessari
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');
//poi cicla sui file inviati e memorizzali usando media_handle_upload();
    if ($_FILES) {
        foreach ($_FILES as $file => $array) {
            if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
                echo "errore di upload : " . $_FILES[$file]['error'];
                die();
            }
            $attach_id = media_handle_upload( $file, $post_id );
        }   
    }
//e se vuoi impostare quell'immagine come miniatura del Post allora usa:
  update_post_meta($post_id,'_thumbnail_id',$attach_id);
  echo "caricata la nuova miniatura";
  die();
} 

spero sia utile

7 mar 2011 23:25:57
Commenti

È fantastico. Solo un paio di dubbi. Cioè, dove deve essere inserito tutto ovviamente. Il form va nella pagina in questione e quello sarà l'ID del post da utilizzare. La prima add action è per l'area HEAD o per il functions.php. E il blocco ajax finale che inizia con //hook the ajax call. Dove va inserita quella parte. Grazie mille.

Robin I Knight Robin I Knight
9 mar 2011 13:50:25

il primo e l'ultimo frammento di codice possono essere inseriti ovunque nel tuo functions.php, mentre il secondo frammento deve essere posizionato nella pagina dove vuoi visualizzare il form di upload. Puoi anche trasformare il secondo frammento in uno shortcode per semplificare le cose.

Bainternet Bainternet
9 mar 2011 13:58:23

Quello che non capisco è: come fa il form a sapere di dover usare my_ajax_upload()? Non dovrebbe essere incluso nella chiamata ajax? Lo chiedo perché ho un loop di post che permetto di modificare e hanno bisogno di funzioni diverse per elaborare determinati post.

Pollux Khafra Pollux Khafra
29 nov 2012 15:31:39

Il modulo sa di dover utilizzare my_ajax_upload perché il suo valore action è agganciato (add_action(...) alla funzione my_ajax_upload.

Bainternet Bainternet
29 nov 2012 20:05:44

È cambiato qualcosa di recente in WP che potrebbe influire su questa funzionalità? Per qualche motivo non ho dati $_POST quando arrivo a my_ajax_upload, anche se nella callback JS showRequest il parametro formData contiene tutto ciò che mi aspetto.

drzaus drzaus
4 gen 2013 11:23:01

Stranamente, se cambio il metodo del form in "GET", fa comunque un post ma con i dettagli del form nell'URL, e solo allora i dati del form sono disponibili lato server (sebbene come parametri URL). Aggiornamento: Tranne i file :)

drzaus drzaus
4 gen 2013 11:48:50

@Bainternet, Soluzione fantastica. La funzione di callback del post (showResponse) non funziona. Hai qualche suggerimento al riguardo?

Rocker Maruf Rocker Maruf
27 gen 2015 18:09:01

Non funziona? Qualche errore?

Bainternet Bainternet
28 gen 2015 10:40:40
Mostra i restanti 3 commenti