Как загрузить файл на сервер через форму input?

Question

[Stepan Sidorov]

Привет.
Вот такая задача у меня стоит, загрузить файл на сайт, используя только лишь JavaScript.
Input для файла на сайте выглядит так
Мне нужно загрузить файл .pdf.
Важно, что я не могу использовать другие языки, и сторонние библиотеки, только js.
Спасибо!

Comments

[Павел Корнилов]

Оберните input в форму и добавьте submit. Т.о. даже JS не понадобится для отправки файла.
Или использование JS является условием задачи?

[Stepan Sidorov]

Павел Корнилов, Да. Это не задача, это условия работы :)

[Stepan Sidorov]

Павел Корнилов, Можно ли увидеть код? Т.К. я не понимаю как послать туда файл обернув input в форму

[Павел Корнилов]

Stepan Sidorov, тогда вот, полное решение - https://stackoverflow.com/questions/36067767/how-d...
Честно нагуглил за 20 сек =)

[Stepan Sidorov]

Павел Корнилов, Сейчас посмотрю что за решение

[Павел Корнилов]

Stepan Sidorov, ну, это самый простой и базовый вариант:

<form method="POST" action="/target/handler">
<input type=file>
<input type=submit value="GO!">
</form>

[Stepan Sidorov]

Павел Корнилов, Сайт не мой. Поэтому мне нужно получается сделать form, потом полученный с сайта input прикрутить с помощью Appendchild к form?

[Павел Корнилов]

Stepan Sidorov, тогда нет, это будет страшное костыльное решение. Плюс, нужно учитывать политики безопасности при кросс-доменной передаче данных.
Думаю, вам лучше переформулировать вопрос, обозначив все важные моменты, поскольку они выясняются только в процессе обсуждения.

[Stepan Sidorov]

Павел Корнилов, Ну, тогда вопрос такой.
Как загрузить файл на сторонний сайт, используя только чистый js, в <input type="file"/>, при этом оно не находится в <form>?

[Павел Корнилов]

Stepan Sidorov, тогда можно попробовать метод по ссылке, что я давал выше. 138 чел. отметили его как полезное решение.

[Stepan Sidorov]

Павел Корнилов, Окей. Я попробую.

[zkrvndm]

Stepan Sidorov, я дополнил свой ответ, прочитайте сноску в конце ответа.

Answer 1

[zkrvndm]

Набросал вам функцию для отправки файла:

function sendFile(file, url) {

  // Создаем форму в конструкторе:
  var formData = new FormData();

  // Добавляем наш файл в форму:
  formData.append('file', file, file.name);

  // Отправляем форму на сервер:

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url);
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        alert('Запрос выполнен успешно, ответ сервера: ' + xhr.responseText);
      }
      else {
        alert('При выполнении запроса произошла неизвестная ошибка!');
      }
    }
  }
  
  xhr.send(formData);

}

P. S. Забыл дописать. Получить файл с поля можно вот так:

input_file = document.querySelector('input[type="file"]').files[0];

Ну, а далее тупо вызывайте написанную мной функцию, где первым аргументом передаёте полученный файл, а вторым адрес куда вам нужно отправить этот файл:

sendFile(input_file, 'https://адрес_куда_отправить');