Как отправить форму без перезагрузки страницы?

Question

[Кот Фрейда]

Возможно, глупый вопрос, но...
Суть такова:

Есть простая форма:

<form id="uploadDropForm" method="post" action="" enctype="multipart/form-data">
    <label id="drop-box">
        <input id="file-input" type="file">
    </label>
</form>

Через js мы ее отправляем на сервер:

const input = document.getElementById('file-input');

document.getElementById('drop-box').onchange = function () {
    const file = input.files[0];
    upload(file);
};

const upload = file => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://my-site.ru/');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(file);
    document.getElementById('uploadDropForm').submit();
};

Но когда форма отправляется, страница перезагружается, а нужно, чтобы не перезагружалась.
Без отправки формы файл не отправляется на сервер.

Можно ли тут что-нибудь сделать?

Answer 1

[alexalexes]

xhr.send(file); // отправили файл аяксом, мы молодцы.
    document.getElementById('uploadDropForm').submit(); // зачем-то еще отправляем форму традиционным способом, наверное тут мы что-то делаем не так.???

Еще нужно ответить на вопрос "А был ли мальчик?", то есть что вы передаете в метод send:

...
console.log(file);
xhr.send(file);
...

Comments

[Кот Фрейда]

Сам файл консолится, но xhr.send(file) возвращает undefined. Что это значит?

[Stockholm Syndrome]

Кот Фрейда, это ничего не значит, метод send всегда возвращает undefined

[alexalexes]

xhr.open('POST', 'http://my-site.ru/');
Вы прям в корень сайта шлете запрос и потом определяете, что такое обращение было по ajax-у (например, если бекэнд на php, наверное, в index.php где-то детектится $_SERVER['HTTP_X_REQUESTED_WITH'] )? или вы так упростили url для примера, что непонятно, где принимается на стороне сервера ajax запрос?
Нужно отладкой посмотреть, что там, на стороне сервера твориться в момент отправки ajax-запроса. И точно определиться, куда вы будете слать его, потому что action формы указывает, что вы намереваетесь отправить форму на адрес текущей страницы (не обязательно это корень сайта), а ajax настроили на отправку в корень сайта, тут нужно четкое понимание куда полетит запрос, на какую страницу или метод, где его встретит код обработки.

[Кот Фрейда]

alexalexes, запрос приходит правильно. Покопался сейчас в отладке, сервер присылал 500 ошибку из-за ошибки в php коде. Но я сдампил массив $_FILES, и он совершенно пуст.

например, если бекэнд на php, наверное, в index.php где-то детектится $_SERVER['HTTP_X_REQUESTED_WITH'] )?

Угу.

Странно то, что когда я загружаю разные файлы, то меняется длина заголовков прямо пропорционально длине файла, но сам массив с файлами пустой.

[Кот Фрейда]

Решил проблему, посмотрев логи nginx. Там была ошибка, которая косвенно указывала на то, что мы пытаемся отправить форму с одним типом кодировки (application/x-www-form-urlencoded), а отправляем с multipart/form-data.
Вместо отправки заголовка через ajax

spoiler

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

оставил тип кодирования только у формы (multipart/form-data) и завернул файл в

const formData = new FormData();
    formData.append('file', file);
    xhr.send(formData);

Спасибо всем за ответы.

Answer 2

[m_frost]

event.preventDefault или return false но чесно с .submit() не работал потому незнаю как правильно использовать

Comments

[Кот Фрейда]

Пробовал, не работает)

Answer 3

[Сергей Котов]

Без ajax хз