На отправку данных с формы пишем обработчик:
$(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, правда описание на английском, но это не так страшно.
POST
-запрос посылается со страницы, обычно для передачи данных на сервер, будь то данные с формы или файл, ну да ладно. Теперь перейдем к сообщению на хосте два файлика main.html и save.php - так, они есть, это уже не плохо. Как я понимаю, данные со страницыmain.html
передаются вsave.php
, верно? Что далее, что у Вас происходит и что не нужно открывать или закрыть?