Disons que j'ai cet élément sur la page:

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

Cela créera un bouton qui permet aux utilisateurs de la page Web de sélectionner un fichier via une boîte de dialogue OS "Fichier ouvert ..." dans le navigateur.

Supposons que l'utilisateur clique sur ledit bouton, sélectionne un fichier dans la boîte de dialogue, puis clique sur le bouton «Ok» pour fermer la boîte de dialogue.

Le nom de fichier sélectionné est maintenant stocké dans:

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

Maintenant, disons que le serveur gère les POST en plusieurs parties à l'URL "/ upload / image".

Comment envoyer le fichier vers "/ upload / image"?

De plus, comment écouter la notification indiquant que le téléchargement du fichier est terminé?

À moins que vous n'essayiez de télécharger le fichier en utilisant ajax, soumettez simplement le formulaire à /upload/image.

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

Si vous souhaitez télécharger l'image en arrière-plan (par exemple sans soumettre le formulaire entier), vous pouvez utiliser ajax:

• Téléchargement de fichier asynchrone (téléchargement de fichier AJAX) à l'aide de jsp et javascript
• Téléchargement de fichier jQuery Ajax
• Ajax utilisant le téléchargement de fichiers

Pure JS

Vous pouvez utiliser fetch en option avec 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)

Approche old school - 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>)

RÉSUMÉ

• Côté serveur, vous pouvez lire le nom du fichier d'origine (et d'autres informations) qui est automatiquement inclus à la demande du navigateur dans le filenameparamètre formData.
• Vous n'avez PAS besoin de définir l'en-tête de la demande Content-Typesur multipart/form-data- cela sera automatiquement défini par le navigateur.
• Au lieu de /upload/imagevous pouvez utiliser une adresse complète comme http://.../upload/image.
• Si vous souhaitez envoyer de nombreux fichiers en une seule requête, utilisez l' multipleattribut <input multiple type=... />:, et attachez tous les fichiers choisis à formData de la même manière (par exemple photo2=...files[2];... formData.append("photo2", photo2);)
• Vous pouvez inclure des données supplémentaires (json) à demander, par exemple let user = {name:'john', age:34}de cette manière:formData.append("user", JSON.stringify(user));
• Ces solutions devraient fonctionner sur tous les principaux navigateurs.