medbrat69
@medbrat69
Основатель toster.ru

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

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

Есть простая форма:
<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();
};


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

Можно ли тут что-нибудь сделать?
  • Вопрос задан
  • 116 просмотров
Решения вопроса 1
@alexalexes
xhr.send(file); // отправили файл аяксом, мы молодцы.
    document.getElementById('uploadDropForm').submit(); // зачем-то еще отправляем форму традиционным способом, наверное тут мы что-то делаем не так.???

Еще нужно ответить на вопрос "А был ли мальчик?", то есть что вы передаете в метод send:
...
console.log(file);
xhr.send(file);
...
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@m_frost
event.preventDefault или return false но чесно с .submit() не работал потому незнаю как правильно использовать
Ответ написан
liqrizz
@liqrizz
лол
Без ajax хз
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы