JavaScript: загрузить файл

Question

Допустим, у меня есть этот элемент на странице:

<input id="image-file" type="file" />

Это создаст кнопку, которая позволит пользователям веб-страницы выбрать файл через диалоговое окно ОС "Файл открыт..." в браузере.

Допустим, пользователь нажимает указанную кнопку, выбирает файл в диалоговом окне, а затем нажимает кнопку "ОК", чтобы закрыть диалоговое окно.

Выбранное имя файла теперь сохраняется в:

document.getElementById("image-file").value

Теперь предположим, что сервер обрабатывает многоэлементные сообщения POST по URL-адресу "/upload/image".

Как отправить файл в "/upload/image"?

Кроме того, как я могу прослушать уведомление о том, что файл закончил загрузку?

Answer 1

PURE JS

Используйте следующий код:

let photo = document.getElementById("image-file").files[0] // get file from input

let formData = new FormData();
formData.append("photo", photo);        
// formData.append("user", JSON.stringify(user));   // you can add also some json data to formData like e.g. user = {name:'john', age:34}

let req = new XMLHttpRequest();
req.open("POST", '/upload/image');
req.send(formData);

• На стороне сервера вы можете прочитать оригинальное имя файла (и другую информацию), которое автоматически включается в вышеуказанный запрос.
• Вам НЕ нужно использовать xhr.setRequestHeader('Content-Type', 'multipart/form-data'); - это будет установлено автоматически браузером.
• Вместо /upload/image Вы можете использовать полный адрес, как http://.../upload/image,
• Это решение должно работать во всех основных браузерах.

Больше информации об ответе / обработке ошибок здесь.

И вот рабочий пример.

Answer 2

Если вы не пытаетесь загрузить файл с помощью ajax, просто отправьте форму на /upload/image,

<form enctype="multipart/form-data" action="/upload/image" method="post">
    <input id="image-file" type="file" />
</form>

Если вы хотите загрузить изображение в фоновом режиме (например, не отправляя всю форму), вы можете использовать ajax:

• Асинхронная загрузка файлов (загрузка файлов AJAX) с использованием jsp и javascript
• JQuery Ajax Загрузка файла
• Ajax с использованием загрузки файла

Answer 3

Если вы на самом деле ищете чистый способ загрузки изображения с помощью javascript, то следующий урок 2009 года расскажет вам, как это сделать:

http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html

Я столкнулся с этим, когда захотел добавить базовую аутентификацию в отправку формы, не включая куки. Например, если у вас есть поля имени пользователя / пароля с полями имени файла, файла и т. Д.

Надеюсь это поможет!

Answer 4

Я пытался сделать это какое-то время, и ни один из этих ответов у меня не работал. Вот как я это сделал.

У меня был файл выбора и кнопка отправки

      <input type="file" name="file" id="file">
<button onclick="javascript:doupload()" name="submit">Upload File</button>

Затем в моем коде javascript я поместил это

      function doupload() {
    let data = document.getElementById("file").files[0];
    let entry = document.getElementById("file").files[0];
    console.log('doupload',entry,data)
    fetch('uploads/' + encodeURIComponent(entry.name), {method:'PUT',body:data});
    alert('your file has been uploaded');
    location.reload();
};

В чем разница между моим ответом и другими ответами?

В других ответах использовалось бы fetch('/upload/image', {method: "POST", body: formData}); Но всякий раз, когда я это делал, я получал ошибку 404, потому что искал файл для загрузки, а не для загрузки.

я использую fetch('uploads/' + 'filename.txt', {method:'PUT',body:data}); Вместо того, чтобы запрашивать файл, он помещает файл и сообщает серверу, какие данные нужно поместить.

Протестировано с веб-сервером для Chrome -https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

Примечание. При использовании веб-сервера для Chrome вам необходимо перейти в расширенные параметры и установить флажок «Разрешить загрузку файлов». Если вы этого не сделаете, вы получите сообщение об ошибке «Не разрешено».

Answer 5

Вот ответ на отправку формы с файлами, которых нет в форме:

      const formData = new FormData();
const files = event.target.files;

for (const file of files) {
   formData.append('files[]', file);
}

$.ajax({
   type: "POST",
   url: urlString,
   data: formData,
   error : function (result) {
       console.log('error', result);
   },
   success : function (result) {
      console.log('success', result)
   }
});

Answer 6

Как его создатель, я предвзят;) но вы также можете использовать что-то вроде https://uppy.io/. Он выполняет загрузку файлов без перехода со страницы и предлагает несколько бонусов, таких как перетаскивание, возобновление загрузки в случае сбоя браузера / нестабильных сетей и импорт, например, из Instagram. Он также с открытым исходным кодом и не зависит от jQuery или чего-то подобного.