Wordpress und AJAX - Bild als Feature hochladen

Question

Ich benutze WordPress mit Ajax in einem Frontend-Formular und ich würde Unterstützung für die Handhabung und das Hochladen des vorgestellten Bildes benötigen. Mein Problem betrifft speziell das vorgestellte Bild. Mein HTML ist so etwas wie:

<form id="msform" action="#" method="post" enctype="multipart/form-data"> 
//inputs of various nature 
<input type="file" name="main_image" id="main_image" multiple="false" value="" accept=".png, .jpg, .jpeg, .gif"/> 
<input type="submit" class="submit" value="Publish"/> 
</form> 

ich Daten in eine PHP-Funktion (nach Wordpress-Verfahren) durch diese jquery senden:

function apfaddpost() { 
    var formData = $('#msform').serialize(); 
    formData.append('main_image', $('#main_image')[0].files[0]); //here should be the problem 
    jQuery.ajax({ 
     type: 'POST', 
     url: apfajax.ajaxurl, 
     data: formData + '&action=apf_addpost', //here I send data to the php function calling the specific action 
     processData: false, 
     contentType: false 

     success: function(data, textStatus, XMLHttpRequest) { 
      var id = '#apf-response'; 
      jQuery(id).html(''); 
      jQuery(id).append(data); 
      resetvalues(); 
     }, 

     error: function(MLHttpRequest, textStatus, errorThrown) { 
      alert(errorThrown); 
     } 

    }); 
} 

Meine Funktion PHP ist so etwas wie

function apf_addpost() { 
    require_once(ABSPATH . "wp-admin" . '/includes/image.php'); 
    require_once(ABSPATH . "wp-admin" . '/includes/file.php'); 
    require_once(ABSPATH . "wp-admin" . '/includes/media.php'); 
    $file_handler = 'main_image'; 
    $attach_id = media_handle_upload($file_handler,$pid); 
    update_post_meta($pid,'_thumbnail_id',$attach_id); 
} 

Wichtig zu sagen: alle anderen Daten wie Titel, Beschreibung, Tags sind korrekt serialisiert und gesendet. Das Problem ist für das Bild. Ich habe auch versucht, den $_FILES[] Handler ohne Erfolg zu verwenden, und ich nehme an, dass mein Ajax-Code dann nicht so groß ist. Kannst du mir helfen? Wenn Sie eine andere Problemumgehung für dieses Problem haben, teilen Sie diese bitte mit! Danke im Voraus.

[gelöst] EDIT

Dank der Antworten unten Ich habe gerade meine Ajax in

geändert

function apfaddpost() { 
    var fd = new FormData($('#msform')[0]); 
    fd.append("main_image", $('#main_image')[0].files[0]); 
    fd.append("action", 'apf_addpost');  
    //Append here your necessary data 
    jQuery.ajax({ 
     type: 'POST', 
     url: apfajax.ajaxurl, 
     data: fd, 
     processData: false, 
     contentType: false, 

     success: function(data, textStatus, XMLHttpRequest) { 
      var id = '#apf-response'; 
      jQuery(id).html(''); 
      jQuery(id).append(data); 
      resetvalues(); 
     }, 

     error: function(MLHttpRequest, textStatus, errorThrown) { 
      alert(errorThrown); 
     } 

    }); 
} 

ich entdeckt habe, dass FormData() Dateien serialisiert werden können, was die .serialize() Methode doesn t. Es ist bekannt, dass es einfach war, weiterzugehen. Danke.

Answer 1

Bitte versuchen Sie es:

Ich habe Ihren Code ändern.

JQuery (hinzugefügt Formdata() und anhängen)

function apfaddpost() { 
    var fd = new FormData(); 
    fd.append("main_image", $('#main_image')[0].files[0]); 
    fd.append("action", 'apf_addpost');  
    //Append here your necessary data 
    jQuery.ajax({ 
     type: 'POST', 
     url: apfajax.ajaxurl, 
     data: fd, 
     processData: false, 
     contentType: false 

     success: function(data, textStatus, XMLHttpRequest) { 
      var id = '#apf-response'; 
      jQuery(id).html(''); 
      jQuery(id).append(data); 
      resetvalues(); 
     }, 

     error: function(MLHttpRequest, textStatus, errorThrown) { 
      alert(errorThrown); 
     } 

    }); 
} 

in function.php

Ich habe Code-Datei-Upload hinzugefügt

/******FILE UPLOAD*****************/ 
function upload_user_file($file = array()) {  
    require_once(ABSPATH . 'wp-admin/includes/admin.php'); 
    $file_return = wp_handle_upload($file, array('test_form' => false)); 
    if(isset($file_return['error']) || isset($file_return['upload_error_handler'])) { 
     return false; 
    } else { 
     $filename = $file_return['file']; 
     $attachment = array(
      'post_mime_type' => $file_return['type'], 
      'post_title' => preg_replace('/\.[^.]+$/', '', basename($filename)), 
      'post_content' => '', 
      'post_status' => 'inherit', 
      'guid' => $file_return['url'] 
     ); 
     $attachment_id = wp_insert_attachment($attachment, $file_return['url']); 
     require_once(ABSPATH . 'wp-admin/includes/image.php'); 
     $attachment_data = wp_generate_attachment_metadata($attachment_id, $filename); 
     wp_update_attachment_metadata($attachment_id, $attachment_data); 
     if(0 < intval($attachment_id)) { 
      return $attachment_id; 
     } 
    } 
    return false; 
} 

jetzt Ihre Funktion ändern apf_addpost() in function.php

function apf_addpost() { 
    foreach($_FILES as $file) 
    { 
      if(is_array($file)) { 
       $attach_id =upload_user_file(); //Call function 
       update_post_meta($pid,'_thumbnail_id',$attach_id); 
      } 
    } 

}