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

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

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

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

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

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

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

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

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

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

Чистый JS

При желании вы можете использовать fetch с помощью 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)

Старый школьный подход - xhr

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

formData.append("photo", photo);                                
req.open("POST", '/upload/image');
req.send(formData);

function SavePhoto(e) 
{
    let user = { name:'john', age:34 };
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    let photo = e.files[0];      
    
    formData.append("user", JSON.stringify(user));   
    formData.append("photo", photo);
    
    xhr.onreadystatechange = state => { console.log(xhr.status); } // err handling
    xhr.open("POST", '/upload/image');    
    xhr.send(formData);
}

<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Choose file and 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>
(the stack overflow snippets, has some problem with error handling - the xhr.status is zero (instead of 404) which is similar to situation when we run script from file on <a href="https://stackoverflow.com/a/10173639/860099">local disc</a> - so I provide also js fiddle version which shows proper http error code <a href="https://jsfiddle.net/Lamik/k6jtq3uh/2/">here</a>)

РЕЗЮМЕ

• На стороне сервера вы можете прочитать оригинальное имя файла (и другую информацию), которое автоматически включается в запрос браузера filename параметре formData.
• Вам НЕ нужно устанавливать заголовок запроса Content-Typeнаmultipart/form-data - это будет установлено браузером автоматически.
• Вместо этого /upload/imageвы можете использовать полный адрес, какhttp://.../upload/image .
• Если вы хотите отправить много файлов в одном запросе, используйте multipleатрибут: <input multiple type=... />и прикрепите все выбранные файлы к formData аналогичным образом (например, photo2=...files[2];...formData.append("photo2", photo2); )
• Вы можете включить дополнительные данные (JSON) для запроса, например, let user = {name:'john', age:34} таким образом:formData.append("user", JSON.stringify(user));
• Это решение должно работать на всех основных браузерах.