Передать через ajax данные формы

Хочу сделать на сайте добавление новостей без перезагрузки страницы. Вот форма:

Введите заголовок:

Описание:

Категория: '' '' '>: ' '

Назад
Вот код на js:
$(document).ready(function(){ // Делаем выборку кнопки из DOM дерева и заносим её в переменную var clickButtonForm = $("#clickButtonForm"); // Составляем функцию которая срабатывает после события click на нашей кнопке clickButtonForm.click(function(){ // Делаем выборку поля для ввода заголовка и заносим в переменную var Header = $("#header_news").val(); // Делаем выборку поля для ввода описание и заносим в переменную var Description = $("#description").val(); // Делаем выборку поля для ввода подкатегорий и заносим в переменную var Subcategory = $("#subcategory").val(); // Делаем выборку поля для картинки и заносим в переменную var $image = $("#image"); var fd = new FormData; fd.append('userfile',$image.prop('files')[0]); //Аякс запрос $.ajax({ url: "1.php", data: {header: Header,description: Description,subcategory: Subcategory}, type: 'POST', success: function (data) { alert(data); } }); }); });
Как мне передать изображение вместе с другими данными? Знаю что если прописать
processData: false, contentType: false,
То можно передать изображение, но тогда строковые данные не передадутся. Подскажите пожалуйста решение.

Ответ

В data нужно передавать ваш объект FormData с нужными вами данными. С помощью formData.append добавьте заголовок, описание и другие нужные вам поля. Туда же добавляется файл. После этого отправляйте данные с параметрами processData: false, contentType: false
Сейчас же у вас создаётся FormData, а потом в data передаётся левый объект {header: Header,description: Description,subcategory: Subcategory}
Кстати, учтите, что это всё IE10+.