Wordpress和AJAX - 上傳圖像爲特色

Question

我在前端窗體中使用ajax wordpress，我需要支持處理和上傳精選圖像。我的問題是關於特色圖片。我的HTML是一樣的東西：

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

    }); 
} 

我的功能PHP是一樣的東西

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

重要：

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

我通過這個jQuery將數據發送到一個PHP函數（以下WordPress的方法）說：所有其他數據，如標題，說明，標籤正確序列化和發送。問題在於圖像。我也嘗試過使用$_FILES[]處理程序，但沒有成功，我想我的ajax代碼不是那麼好。你可以幫我嗎？如果您對此問題有其他解決方法，請分享！提前致謝。

[解決]編輯

多虧了下面的回答我剛剛改變了我的阿賈克斯到

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

    }); 
} 

我發現FormData()允許序列化的文件，一件事情.serialize()方法沒有按「T。已知的是，繼續前進很簡單。 謝謝。

Answer 1

請嘗試：

我已修改您的代碼。

jQuery的（加FORMDATA（）和附加）

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

    }); 
} 

在function.php

我加入了文件上傳代碼

/******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; 
} 

現在修改功能apf_addpost()在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); 
      } 
    } 

}