Как отправить картинку через ajax?

Суть в том, что на страницу save.php посылается POST запрос с картинкой и парочкой полей, а на странице main.html, с которой это сделали (form target="_blank" - присутствует на форме) выполняется:
$('#obj_d').html('Сохранено успешно');
Думаю можно как-то отправить картинку через $.ajax(), но не знаю как. ID картинки cat_img_t. Что делает PHP: скрипт в файле save.php ловит картинку, изменяет размер, кодирует в base64 и заносит в БД. Как отправить картинку через ajax?

Ответ

На отправку данных с формы пишем обработчик:
$(document).ready(function (e) { $('#-идентификатор формы написать сюда-').on('submit',(function(e) { e.preventDefault(); // делаем отмену действия браузера и формируем ajax var formData = new FormData($('#-идентификатор формы написать сюда-')[0]); // данные с формы завернем в переменную для ajax
$.ajax({ type:'POST', // тип запроса url: $(this).attr('action'), // куда будем отправлять, можно явно указать data:formData, // данные, которые передаем cache:false, // кэш и прочие настройки писать именно так (для файлов) // (связано это с кодировкой и всякой лабудой) contentType: false, // нужно указать тип контента false для картинки(файла) processData: false, // для передачи картинки(файла) нужно false success:function(data){ // в случае успешного завершения console.log("Завершилось успешно"); // выведем в консоли успех console.log(data); // и что в ответе получили, если там что-то есть }, error: function(data){ // в случае провала console.log("Завершилось с ошибкой"); // сообщение об ошибке console.log(data); // и данные по ошибке в том числе } }); })); });
Кстати, для url по идее можно оставить вот так, если изначально все правильно вызывается:
url: this.action,
Либо написать явный путь url, как Вам удобнее.
А еще, к примеру, если Вам нужно вызвать отправку данных с формы после выбора Вашей картинки, то после выбора можете написать вот это:
$("#-идентификатор формы написать сюда-").submit();
Атрибут target - после того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется атрибут target, в качестве его значения используется имя окна или фрейма. Если target не установлен, возвращаемый результат показывается в текущем окне.
У Вас в коде написано:
form target="_blank" - загружает страницу в новое окно браузера.
Если не хотите новых страниц - уберите просто аттрибут и все. Вы переделаете на ajax и никаких вкладок не будет, при желании можете сделать скрытый