Digamos que tengo este elemento en la página:

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

Esto creará un botón que permite a los usuarios de la página web seleccionar un archivo a través de un cuadro de diálogo "Abrir archivo ..." del sistema operativo en el navegador.

Digamos que el usuario hace clic en dicho botón, selecciona un archivo en el cuadro de diálogo y luego hace clic en el botón "Aceptar" para cerrar el cuadro de diálogo.

El nombre del archivo seleccionado ahora se almacena en:

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

Ahora, supongamos que el servidor maneja las POST de varias partes en la URL "/ upload / image".

¿Cómo envío el archivo a "/ upload / image"?

Además, ¿cómo escucho las notificaciones de que el archivo ha terminado de cargarse?

A menos que esté intentando cargar el archivo usando ajax, simplemente envíe el formulario a /upload/image.

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

Si desea cargar la imagen en segundo plano (por ejemplo, sin enviar el formulario completo), puede usar ajax:

• Carga asíncrona de archivos (carga de archivos AJAX) usando jsp y javascript
• jQuery Ajax File Upload
• Ajax usando la carga de archivos

JS puro

Puede usar fetch opcionalmente 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)

Enfoque de la vieja escuela - 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>)

RESUMEN

• En el lado del servidor, puede leer el nombre del archivo original (y otra información) que se incluye automáticamente para solicitar por navegador en el filenameparámetro formData.
• NO es necesario establecer el encabezado de la solicitud Content-Typeen multipart/form-data: el navegador lo configurará automáticamente.
• En lugar de /upload/imageusted puede usar la dirección completa como http://.../upload/image.
• Si desea enviar muchos archivos en una sola solicitud, utilice el multipleatributo: <input multiple type=... />y adjunte todos los archivos elegidos a formData de manera similar (por ejemplo photo2=...files[2];... formData.append("photo2", photo2);)
• Puede incluir datos adicionales (json) para solicitar, por ejemplo, let user = {name:'john', age:34}de esta manera:formData.append("user", JSON.stringify(user));
• Estas soluciones deberían funcionar en todos los principales navegadores.