web-dev-qa-db-de.com

Ajax-Image-Upload mit media_handle_upload und form.js

Ich möchte AJAX Bilder im Front-End-Formular hochladen und kann nicht herausfinden, wo es schief geht.

HTML-Formular zum Hochladen von Bildern

<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>

Hier ist PHP, um das Hochladen von Bildern mit media_handle_upload zu handhaben.

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

Ich brauche eigentlich keine foreach-Schleife, um mehrere Bilder hochzuladen, da wir nur ein Bild sehen, aber nicht herausfinden können, wie man es richtig ändert.

Mit diesem Code gibt es mir nur 0 auf #output1 und ich bin nicht sicher, wo oder wie ich das debuggen soll.

1
Ohsik

Aus meiner Erfahrung, wenn ein Ajax-Aufruf in WordPress 0 zurückgibt, bedeutet dies, dass Ajax die zugehörige PHP-Funktion nicht finden kann. Überprüfen Sie also dreimal, ob die Funktion, auf die Sie in 'add_action' zeigen, der Funktionsname und die Aktion Ihres Formulars übereinstimmen .

Normalerweise füge ich ein Aktionsattribut auch in die ajaxSubmit-Optionen ein. Vielleicht löst es Ihr Problem. Fügen Sie einfach die Aktion 'my_ajax_upload' zum Options-Array hinzu.

Wenn Sie -1 anstelle von 0 erhalten, bedeutet dies, dass die Nonce-Prüfung (check_ajax_referer ($ nonce)) fehlgeschlagen ist.

1
Maija Vilkina