Скажімо, у мене цей елемент на сторінці:

<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

Ви можете необов’язково використовувати функцію " добування"

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)

Підхід до старої школи - ххр

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));
• Це рішення має працювати у всіх основних браузерах.