Diciamo che ho questo elemento nella pagina:

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

Ciò creerà un pulsante che consente agli utenti della pagina Web di selezionare un file tramite una finestra di dialogo "Apri file ..." nel browser.

Supponiamo che l'utente faccia clic su detto pulsante, selezioni un file nella finestra di dialogo, quindi faccia clic sul pulsante "Ok" per chiudere la finestra di dialogo.

Il nome del file selezionato è ora memorizzato in:

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

Supponiamo ora che il server gestisca i POST in più parti nell'URL "/ upload / image".

Come posso inviare il file a "/ upload / image"?

Inoltre, come ascolto la notifica del completamento del caricamento del file?

A meno che tu non stia provando a caricare il file utilizzando ajax, basta inviare il modulo a /upload/image.

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

Se desideri caricare l'immagine in background (ad esempio senza inviare l'intero modulo), puoi utilizzare ajax:

• Upload asincrono di file (upload di file AJAX) usando jsp e javascript
• jQuery Ajax File Upload
• Ajax utilizzando il caricamento di file

JS puro

Puoi usare fetch facoltativamente con 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)

Approccio alla vecchia scuola - 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>)

SOMMARIO

• Nel lato server è possibile leggere il nome del file originale (e altre informazioni) che viene automaticamente incluso per richiedere dal browser nel filenameparametro formData.
• NON è necessario impostare l'intestazione della richiesta Content-Typesu multipart/form-data: verrà impostata automaticamente dal browser.
• Invece di /upload/imagete puoi usare l'indirizzo completo come http://.../upload/image.
• Se vuoi inviare molti file in una singola richiesta usa l' multipleattributo <input multiple type=... />:, e allega tutti i file scelti a formData in modo simile (es. photo2=...files[2];... formData.append("photo2", photo2);)
• È possibile includere dati aggiuntivi (json) da richiedere, ad esempio let user = {name:'john', age:34}in questo modo:formData.append("user", JSON.stringify(user));
• Queste soluzioni dovrebbero funzionare su tutti i principali browser.