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

#javascript #jquery #ajax #post #form

Суть в том, что на страницу save.php посылается POST запрос с картинкой и парочкой
полей, а на странице main.html, с которой это сделали (form target="_blank" - присутствует
на форме) выполняется: 

$('#obj_d').html('Сохранено успешно');


Думаю можно как-то отправить картинку через $.ajax(), но не знаю как.
ID картинки cat_img_t. Что делает PHP: скрипт в файле save.php ловит картинку, изменяет
размер, кодирует в base64 и заносит в БД. Как отправить картинку через ajax?
    

Ответы

Ответ 1

На отправку данных с формы пишем обработчик: 

$(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
и никаких вкладок не будет, при желании можете сделать скрытый