0

Я отправляю следующую форму на сервер Node:

<form id="test_form" action="http://localhost:8080/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="filetoupload"><br>
    <input type="submit">
</form>

Необходимо чтобы сервер получал то же самое, но при этом не происходила перезагрузка страницы, при отправке формы. Как реализовать? В какую сторону копать?

4
  • Вам нужен ajax. 27 июн 2017 в 13:15
  • Да, но как при помощи Ajax'а отправить данные в запросе точно в таком же виде, что и в текущей реализации? Иначе запрос некорректно обрабатывается на сервере. Не могу понять что получает сервер при отправке запроса
    – A. Lakhno
    27 июн 2017 в 13:25
  • Используй new FormData
    – Qwertiy
    27 июн 2017 в 13:28
  • Отправлять в новое окно (target="_blank") или iframe. Ещё можно просто научить сервер отвечать кодом 204, тогда страница не перезагрузится
    – Alexey Ten
    27 июн 2017 в 14:00

1 ответ 1

1
<div>
  <input type="file" id="filetoupload"><br>
  <input type="button" id="button" value="button">
</div>

<script>
document.getElementById('button').onclick = function() {
  var file = document.getElementById('filetoupload').files[0];
  if (file) upload(file);

  function upload(file) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload", true);
    xhr.send(file);

    xhr.onload = xhr.onerror = function() {
      if (this.status == 200) {
        console.log('Файл загружен');
      } else {
        console.log("error " + this.status);
      }
    };      
  }
};
</script>
  1. Вы определись - форму отправляете или файл?
  2. Кодировка multipart/formdata существует в природе для того, чтобы в рамках одной формы отсылать разные типы данных - бинарные и текст. Но ей же не пользуются, потому что запрос нельзя проверить на межсайтовую атаку - токен не виден до декодирования.
  3. AJAX отправляет данные потоком (stream), а не одним пакетом - соотвецно, принимать их надо посредством createStreamWrite.
  4. Спасибо за внимание.
1
  • В данном виде на сервер отправляется форма? <form id="test_form" action="localhost:8080/upload"; method="post" enctype="multipart/form-data"> <input type="file" name="filetoupload"><br><input type="submit"></form> В таком виде сервер принимает запрос и все работает правильно. Возможно с помощью http-запроса отправить данные в таком же виде, в каком они уходят на сервер при наведенном мной примере?
    – A. Lakhno
    30 июн 2017 в 13:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.