Powiedzmy, że mam ten element na stronie:

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

Spowoduje to utworzenie przycisku, który pozwoli użytkownikom strony internetowej wybrać plik za pomocą okna dialogowego „Otwórz plik ...” w przeglądarce.

Powiedzmy, że użytkownik klika wspomniany przycisk, wybiera plik w oknie dialogowym, a następnie klika przycisk „Ok”, aby zamknąć okno dialogowe.

Wybrana nazwa pliku jest teraz przechowywana w:

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

Powiedzmy, że serwer obsługuje wieloczęściowe testy POST pod adresem URL „/ upload / image”.

Jak wysłać plik do „/ upload / image”?

W jaki sposób mogę również oczekiwać powiadomienia o zakończeniu przesyłania pliku?

Chyba, że próbujesz przesłać plik za pomocą ajax, po prostu przesłać formularz do /upload/image.

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

Jeśli chcesz załadować obraz w tle (np. Bez przesyłania całego formularza), możesz użyć ajax:

• Asynchroniczne przesyłanie plików (przesyłanie plików AJAX) przy użyciu jsp i javascript
• jQuery Ajax File Upload
• Ajax za pomocą przesyłania plików

Pure JS

Opcji pobierania można użyć opcjonalnie z funkcją Oczekuj na wypróbowanie

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)

Podejście starej szkoły - 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>)

PODSUMOWANIE

• Po stronie serwera można odczytać oryginalną nazwę pliku (i inne informacje), która jest automatycznie uwzględniana na żądanie przeglądarki w filenameparametrze formData.
• NIE musisz ustawiać nagłówka żądania Content-Typena multipart/form-data- zostanie to ustawione automatycznie przez przeglądarkę.
• Zamiast tego /upload/imagemożesz użyć pełnego adresu jak http://.../upload/image.
• Jeśli chcesz wysłać wiele plików w jednym żądaniu, użyj multipleatrybutu: <input multiple type=... />i dołącz wszystkie wybrane pliki do formData w podobny sposób (np. photo2=...files[2];... formData.append("photo2", photo2);)
• Możesz dołączyć dodatkowe dane (json), aby poprosić np. let user = {name:'john', age:34}W ten sposób:formData.append("user", JSON.stringify(user));
• Te rozwiązania powinny działać we wszystkich głównych przeglądarkach.