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

334
09 февраля 2017, 01:54

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

Answer 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 и никаких вкладок не будет, при желании можете сделать скрытый <div class="hidden"..., в который будете что-то писать, к примеру "Файл успешно загружен" или ошибку какую-то и потом в зависимости от результата внутри success и error отображать нужные данные в этом блоке и убирать у него hidden через .removeClass('hidden');.

По поводу jQuery.ajax можно почитать вот тут: Description jQuery.ajax, правда описание на английском, но это не так страшно.

READ ALSO
jquery в angular

jquery в angular

хочу сделать на лендинге выдиление пунктов меню при прокруткекак мне вот такой скрипт, подключить к ангуляру

367
css рамка для слайдера картинкой

css рамка для слайдера картинкой

Всем привет! Собственно нужна рамка поверх слайда как картинаПопробовал через border-image, не получается

521
Не подтягивается css-файл на хостинге [требует правки]

Не подтягивается css-файл на хостинге [требует правки]

Ребят, какой-то бред получилсяСделал код, на компе все нормально работает но когда загрузил сайт на хостинг, то настройки моего css не активны,...

368
Как выровнять спрайт по центру?

Как выровнять спрайт по центру?

Есть три круга, в этих трех кругах будет размещен спрайт(несколько иконок)Как их выровнять? если bg-position уже отведен под спрайт

536