Digamos que eu tenho esse elemento na página:

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

Isso criará um botão que permite que os usuários da página da web selecionem um arquivo por meio da caixa de diálogo "Arquivo aberto ..." no navegador.

Digamos que o usuário clica no botão, seleciona um arquivo na caixa de diálogo e, em seguida, clica no botão "Ok" para fechar a caixa de diálogo.

O nome do arquivo selecionado agora está armazenado em:

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

Agora, digamos que o servidor lida com POSTs com várias partes no URL "/ upload / image".

Como envio o arquivo para "/ upload / image"?

Além disso, como escuto a notificação de que o upload do arquivo terminou?

A menos que você esteja tentando fazer upload do arquivo usando ajax, basta enviar o formulário para /upload/image.

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

Se você deseja fazer upload da imagem em segundo plano (por exemplo, sem enviar o formulário inteiro), você pode usar o ajax:

• Upload de arquivo assíncrono (upload de arquivo AJAX) usando jsp e javascript
• Upload de arquivo jQuery Ajax
• Ajax usando upload de arquivo

JS puro

Você pode usar buscar opcionalmente com aguardar-tentar-pegar

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)

Abordagem da velha escola - 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>)

RESUMO

• No lado do servidor, você pode ler o nome do arquivo original (e outras informações), que é incluído automaticamente para solicitação pelo navegador no filenameparâmetro formData.
• Você NÃO precisa definir o cabeçalho da solicitação Content-Typecomo multipart/form-data- isso será definido automaticamente pelo navegador.
• Em vez de /upload/imagevocê pode usar o endereço completo como http://.../upload/image.
• Se você deseja enviar muitos arquivos em uma única solicitação, use o multipleatributo: <input multiple type=... />e anexe todos os arquivos escolhidos ao formData de maneira semelhante (por exemplo photo2=...files[2];... formData.append("photo2", photo2);)
• Você pode incluir dados adicionais (json) para solicitar, por exemplo let user = {name:'john', age:34}, desta maneira:formData.append("user", JSON.stringify(user));
• Essas soluções devem funcionar em todos os principais navegadores.