Ответ 1

Если вы не пытаетесь загрузить файл с помощью 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 с использованием загрузки файлов

Ответ 2

Чистый JS

Вы можете использовать выборку опционально с помощью await-try-catch

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

async function SavePhoto(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Before selecting the file open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

<br><br>
(in stack overflow snippets there is problem with error handling, however in <a href="https://jsfiddle.net/Lamik/b8ed5x3y/5/">jsfiddle version</a> for 404 errors 4xx/5xx are <a href="https://stackoverflow.com/a/33355142/860099">not throwing</a> at all but we can read response status which contains code)

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

Для этого я использовал FileReader и следующий урок от Mozilla. Согласно ссылке, размещенной в ответе @dwh, использование FileReader - это современный способ сделать это.

Я привязываю функцию к своему input.onchange и перебираю файлы. В моем случае я ищу аудиофайл, но вы можете сделать это и для других файлов или только для всех файлов. Мой HTML содержит <div id="sounds"> который я использую для прикрепления элементов к:

while (files.length) {
   var file = files.pop();
   if (file.type.includes("audio")) {
       var reader = new FileReader();
       // Retrieve the element to attach the sound to
       var sounds = document.getElementById("sounds");
       // Create a new element for our sound
       var soundFile = document.createElement("soundfile");
       sounds.appendChild(soundFile);
       // Once the FileReader has finished processing the data, from reader.readAsDataURL (below)
       // then this is called.
       reader.onload = (function(sound) {
          return function(file) {
             sound.src = file.target.result;
          };
       })(soundFile);
       reader.readAsDataURL(file);
   }
}

Хотя я показываю это для звука, код тот же для изображения, и учебник, на который я ссылаюсь, посвящен отображению эскиза загруженного изображения.