web-dev-qa-db-fra.com

Ajax image upload avec media_handle_upload et form.js

Je veux que l'image AJAX soit téléchargée sur le formulaire frontal et ne sache pas où cela va mal.

Formulaire HTML pour le téléchargement d'images

<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="action" id="action" value="my_upload_action">
<form>
<div id="output1"></div>

<script>
    jQuery(document).ready( function($) {
        //http://wordpress.stackexchange.com/questions/72406/set-featured-image-front-frontend-form
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
        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     
        }; 

        $('#thumbnail').change(function(){
            // bind form using 'ajaxForm'
            $('#thumbnail_upload').ajaxSubmit(options); 
        });

        function showRequest(formData, jqForm, options) {
            //do extra stuff before submit like disable the submit button
            $('#output1').html('Uploading...');
        }
        function showResponse(responseText, statusText, xhr, $form)  {
            //do extra stuff after submit
        }
    });


</script>

Voici PHP pour gérer le téléchargement d’images avec media_handle_upload

// Enqueue jquery form
function load_jform() {
    wp_enqueue_script( 'jquery-form' ); 
}
add_action( 'wp_enqueue_scripts', 'load_jform' );

//hook the Ajax call
//for logged-in users
add_action('wp_ajax_my_upload_action', 'my_ajax_upload');

function my_ajax_upload(){
//simple Security check
    check_ajax_referer('upload_thumb');

//get POST data
    $post_id = 0;

//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();
    var_dump($_FILES);

    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();
}

En fait, je n'ai pas besoin d'une boucle foreach pour télécharger plusieurs images, car il n'y aura qu'une seule image sélectionnée mais nous ne saurons pas comment la modifier correctement.

Avec ce code, cela me donne juste 0 sur #output1 et je ne sais pas où ni comment déboguer cela.

ajaxuploadspost-thumbnailsformswp-handle-upload
1
Ohsik

D'après mon expérience, si un appel ajax dans wordpress renvoie 0, cela signifie que ajax ne peut pas trouver la fonction php correspondante. Vérifiez donc trois fois que la fonction que vous pointez dans 'add_action', le nom de la fonction et l'action de votre formulaire correspondent .

J'inclus généralement un attribut d'action dans les options ajaxSubmit également, cela résoudra peut-être votre problème. Ajoutez simplement l'action: 'my_ajax_upload' au tableau d'options.

Puisque vous avez Si vous obtenez -1 au lieu de 0, cela signifie que la vérification de nonce (check_ajax_referer ($ nonce)) a échoué.

1
Maija Vilkina