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

}