Carica la miniatura del post dal front-end
1 risposta
- voti
-
- 2011-03-07
Il caricamento difilein ajax è unpo 'complicatoperchénon èpossibile caricarefile utilizzando l'oggetto XMLHttpRequest delbrowser,quindi ènecessario utilizzare una sorta diplug-in di caricamento Ajaxe ilpiù semplice sarebbeil <"JQuery Form Plugin che rende le cosemoltopiù semplicied èinclusoin WordPress. Quindiper usarlo ènecessario accodarlo:
add_action('wp_print_scripts','include_jquery_form_plugin'); function include_jquery_form_plugin(){ if (is_page('12')){ // only add this on the page that allows the upload wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'jquery-form',array('jquery'),false,true ); } }
in quellapagina aggiungiiltuomodulo di caricamentoe JQueryper chiamareilplug-in JQuery Form,adesempio:
<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', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse, // post-submit callback url: ajaxurl // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php }; // bind form using 'ajaxForm' $('#thumbnail_upload').ajaxForm(options); }); function showRequest(formData, jqForm, options) { //do extra stuff before submit like disable the submit button $('#output1').html('Sending...'); $('#submit-ajax').attr("disabled", "disabled"); } function showResponse(responseText, statusText, xhr, $form) { //do extra stuff after submit } </script>
devi aggiornare POSTID con l'effettivo ID delpost. quindi crea lafunzione Ajaxper accettareil caricamento delfilee aggiornare laminiatura delpost
//hook the Ajax call //for logged-in users add_action('wp_ajax_my_upload_action', 'my_ajax_upload'); //for none logged-in users add_action('wp_ajax_nopriv_my_upload_action', 'my_ajax_upload'); function my_ajax_upload(){ //simple Security check check_ajax_referer('upload_thumb'); //get POST data $post_id = $_POST['post_id']; //require the needed files require_once(ABSPATH . "wp-admin" . '/includes/image.php'); require_once(ABSPATH . "wp-admin" . '/includes/file.php'); require_once(ABSPATH . "wp-admin" . '/includes/media.php'); //then loop over the files that were sent and store them using media_handle_upload(); if ($_FILES) { foreach ($_FILES as $file => $array) { if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) { echo "upload error : " . $_FILES[$file]['error']; die(); } $attach_id = media_handle_upload( $file, $post_id ); } } //and if you want to set that image as Post then use: update_post_meta($post_id,'_thumbnail_id',$attach_id); echo "uploaded the new Thumbnail"; die(); }
spero che questo aiuti
Uploading files in ajax is a bit tricky because it is not possible to upload files using the browser's XMLHttpRequest object so you need to use some kind of Ajax upload plugin and the easiest one would be the the JQuery Form Plugin which makes things much easier and it's included in WordPress. So to use it you need to enqueue it:
add_action('wp_print_scripts','include_jquery_form_plugin'); function include_jquery_form_plugin(){ if (is_page('12')){ // only add this on the page that allows the upload wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'jquery-form',array('jquery'),false,true ); } }
on that page add your upload form and the JQuery to call the JQuery Form plugin for example:
<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', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse, // post-submit callback url: ajaxurl // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php }; // bind form using 'ajaxForm' $('#thumbnail_upload').ajaxForm(options); }); function showRequest(formData, jqForm, options) { //do extra stuff before submit like disable the submit button $('#output1').html('Sending...'); $('#submit-ajax').attr("disabled", "disabled"); } function showResponse(responseText, statusText, xhr, $form) { //do extra stuff after submit } </script>
you must update POSTID with the actual post ID. then create the Ajax function to accept the file upload and update the post thumbnail
//hook the Ajax call //for logged-in users add_action('wp_ajax_my_upload_action', 'my_ajax_upload'); //for none logged-in users add_action('wp_ajax_nopriv_my_upload_action', 'my_ajax_upload'); function my_ajax_upload(){ //simple Security check check_ajax_referer('upload_thumb'); //get POST data $post_id = $_POST['post_id']; //require the needed files require_once(ABSPATH . "wp-admin" . '/includes/image.php'); require_once(ABSPATH . "wp-admin" . '/includes/file.php'); require_once(ABSPATH . "wp-admin" . '/includes/media.php'); //then loop over the files that were sent and store them using media_handle_upload(); if ($_FILES) { foreach ($_FILES as $file => $array) { if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) { echo "upload error : " . $_FILES[$file]['error']; die(); } $attach_id = media_handle_upload( $file, $post_id ); } } //and if you want to set that image as Post then use: update_post_meta($post_id,'_thumbnail_id',$attach_id); echo "uploaded the new Thumbnail"; die(); }
hope this helps
-
Èbrillante.Solo unpaio di domande.Cioè,dove deve andaretutto.Ovviamenteilform va sullapaginain questionee quello saràilpostid con cui utilizzarlo.Laprima azione di aggiunta è quellaper l'area HEAD operfunctions.php.e l'ultimoblocco ajax cheinizia con//aggancia la chiamata ajax.Dove va afinire quelpezzo.Graziemolto.This is brilliant. Just a couple of queries. That is, where does everything need to go. Obviously the form goes on the page in question and that will be the post id with which to use. The first add action is that for the HEAD area or for the functions.php . and the final ajax block starting with //hook the ajax call. Where does that bit go. Many thanks.
- 0
- 2011-03-09
- Robin I Knight
-
ilprimoe l'ultimoframmento di codicepossonoessereposizionati ovunqueneltuofunctions.phpe il secondoframmento deveessereposizionatonellapaginain cui desideri visualizzareilmodulo di caricamento,puoi anchetrasformareil secondoframmentoin uno shortcodeper rendere le cosepiùfacili.the first and last snippets of code can be placed anywhere in your functions.php and the second snippet needs to be place on the page you wish to display your upload form on, you cal also turn the second snippet to a shortcode to make things easier.
- 0
- 2011-03-09
- Bainternet
-
Quello chenon capisco è comefailmodulo a sapere di usaremy_ajax_upload ()?Non dovrebbeessereinclusonella chiamata ajax?Lo chiedoperché ho un ciclo dipost che stopermettendo dimodificaree hannobisogno difunzioni diverseper l'elaborazione di determinatipost.What I don't get about this is how does the form know to use my_ajax_upload()? Shouldn't that be included in the ajax call? I ask this because I have a loop of posts that I'm allowing to be edited and they need different functions for processing certain posts.
- 0
- 2012-11-29
- Pollux Khafra
-
Ilform sa di usaremy_ajax_uploadperchéil suo valore di azione è agganciato (`add_action (...`) allafunzione `my_ajax_upload`.The form knows to use my_ajax_upload because its action value is hooked (`add_action(...`) to `my_ajax_upload` function.
- 0
- 2012-11-29
- Bainternet
-
È cambiato qualcosa di recentein WP chepotrebbeinfluenzare questafunzionalità?Per qualche ragionenon ho dati "$ _POST" quando arrivo a "my_ajax_upload",anche senel callback JS "showRequest"ilparametro "formData" contienetutto quello chemi aspetto.Has anything changed recently in WP that would affect this functionality? For some reason I have no `$_POST` data by the time I get to `my_ajax_upload`, even though in the JS callback `showRequest` the `formData` param contains everything I expect.
- 0
- 2013-01-04
- drzaus
-
Stranamente,se cambioilmetodo delmoduloin "GET",fa ancora unpostma coni dettagli delmodulonell'URL,e solo allorai dati delmodulo sono disponibili lato server (sebbene comeparametri URL).* Aggiorna: * Trannei file :)Weirdly, if I change the form method to "GET", it still does a post but with the form details in the URL, and only then is the form data available server-side (albeit as URL params). *Update:* Except the files :)
- 0
- 2013-01-04
- drzaus
-
@Bainternet,soluzionefantastica. Lafunzione di richiamatapost (showResponse)nonfunziona. Hai qualche suggerimentoin merito?@Bainternet , Awesome solution.The post call back function(showResponse) is not working.Do you have any suggestions for that?
- 0
- 2015-01-27
- Rocker Maruf
-
nonfunziona?eventualierrori?not working? any errors?
- 0
- 2015-01-28
- Bainternet
Vorremmo chegli utentifosseroin grado di caricare laminiatura delpost durante lamodifica deipost.Come sarebbe statofatto.Immagino che utilizzi lefunzioni ajax di wordpress.
Qualsiasiidea,
Meraviglioso