WordPress. Почему не передаются файлы FormData?

Question

[reaget]

Здравствуйте!
Я хочу из из формы загрузить файлы на сервер используя AJAX и Action (WordPress).
Я столкнулся с тем, что сами файлы не передаются, но почему это происходит я не понимаю. При чем, все данные кроме файлов передаются.

Вот листинг:

var form = $(this).parents(".form-post-add")
var files = $('.box__file').get(0).files;

var form_data = new FormData();

form_data.append('action', 'post_add');
form_data.append('nonce', nonce);
form_data.append('post_title', form.find('input[name="post_title"]').get(0).value);
form_data.append('post_content', form.find('textarea[name="post_content"]').get(0).value);

$.each(files, function(key, value) {
    form_data.append('FileUpload', value);
});

$.ajax({
	data: form_data,
    type: 'POST',
    processData: false,
    contentType: false,
	success: function(data, jqForm, options) {
        /* код */
    }
});

PHP

add_action('wp_ajax_post_add', 'post_add');

function post_add() {
	 
    $nonce = $_POST['nonce'];
    $title = $_POST['post_title'];
	$content = $_POST['post_content']; 

	$current_user = wp_get_current_user();
	$current_user_id = $current_user->ID;

	$new_post_data = array(
	    'post_author' => $current_user_id,
		'post_content' => $content,
		'post_title' => $title,
		'post_status' => 'publish'
	);

	$post_id = wp_insert_post($new_post_data);
		
	if (!function_exists('wp_generate_attachment_metadata')){
        require_once(ABSPATH . "wp-admin" . '/includes/image.php');
        require_once(ABSPATH . "wp-admin" . '/includes/file.php');
        require_once(ABSPATH . "wp-admin" . '/includes/media.php');
    }
        
    if ($_FILES) {
        foreach ($_FILES as $file => $image) {
            if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
                return "upload error : " . $_FILES[$file]['error'];
            }
            $attach_id = wp_handle_upload( $image['tmp_name'], $post_id );
        }
    }
        
    if ($attach_id > 0){
        $post = get_post($post_id,'ARRAY_A');
        $image = wp_get_attachment_image_src( $attach_id );
        $image_tag = '<img src="'.$image[0].'" width="'.$image[1].'" height="'.$image[2].'" />';
        
        $post['post_content'] = $image_tag . $post['post_content'];
        
        //$post['post_content'] = $post['post_content'] . $image_tag;
        
        $post_id =  wp_update_post( $post );
    }

	$success = array(
		'post_new' => $post_id	
	);	 
	 
	if ($errors) wp_send_json_error( $errors );  
	else wp_send_json_success( $success );

	die();

};

Answer 1

[its2easyy]

Нужно добавить enctype: 'multipart/form-data', к параметрам $.ajax

Answer 2

[zkrvndm]

Разместите код ниже на странице с формой:

<script type="text/javascript">

  // По готовности страницы, вешаем на форму обработчик onsubmit инлайново:
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('form').setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
  });

  // Функция для отправки формы на чистом JavaScript:
  function form_send(form) {
    var url = form.getAttribute('action') + '?time=' + new Date().getTime();
    var xhr = new XMLHttpRequest(); xhr.open('POST', url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          form.setAttribute('onsubmit', 'event.preventDefault();');
          form.innerHTML = xhr.responseText;
        }
        else {
          alert('При отправке формы произошла ошибка, детали смотрите в консоли.');
          console.log('При отправке формы произошла ошибка, ниже объект с деталями ошибки:');
          console.dir(xhr);
        }
      }
    }
    xhr.send(new FormData(form));
  }
  
</script>

Обратите внимание, что у вашей формы form должен быть правильно прописан action, если action не указан, то работать НЕ будет. Также предполагается, что форма на странице у вас одна.