Angenommen, ich habe dieses Element auf der Seite:

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

Dadurch wird eine Schaltfläche erstellt, mit der die Benutzer der Webseite eine Datei über das Dialogfeld "Datei öffnen ..." des Betriebssystems im Browser auswählen können.

Angenommen, der Benutzer klickt auf diese Schaltfläche, wählt eine Datei im Dialogfeld aus und klickt dann auf die Schaltfläche "OK", um das Dialogfeld zu schließen.

Der ausgewählte Dateiname wird jetzt gespeichert in:

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

Angenommen, der Server verarbeitet mehrteilige POSTs unter der URL "/ upload / image".

Wie sende ich die Datei an "/ upload / image"?

Wie kann ich auf eine Benachrichtigung warten, dass das Hochladen der Datei abgeschlossen ist?

Wenn Sie nicht versuchen, die Datei mit Ajax hochzuladen, senden Sie das Formular einfach an /upload/image.

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

Wenn Sie das Bild im Hintergrund hochladen möchten (z. B. ohne das gesamte Formular zu senden), können Sie ajax verwenden:

• Asynchroner Datei-Upload (AJAX-Datei-Upload) mit JSP und Javascript
• Hochladen von jQuery Ajax-Dateien
• Ajax mit Datei-Upload

Pure JS

Sie können fetch optional mit await-try-catch verwenden

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)

Old School Ansatz - 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>)

ZUSAMMENFASSUNG

• Auf der Serverseite können Sie den ursprünglichen Dateinamen (und andere Informationen) lesen, die automatisch in filenameden Parameter formData aufgenommen werden, um vom Browser angefordert zu werden.
• Sie nicht Set - Request - Header müssen Content-Typezu multipart/form-data- dies durch Browser automatisch eingestellt wird.
• Stattdessen /upload/imagekönnen Sie die vollständige Adresse wie verwenden http://.../upload/image.
• Wenn Sie viele Dateien in einer einzigen Anfrage senden möchten, verwenden Sie das multipleAttribut: <input multiple type=... />und hängen Sie alle ausgewählten Dateien auf ähnliche Weise an formData an (z. B. photo2=...files[2];... formData.append("photo2", photo2);).
• Sie können zusätzliche Daten (json) hinzufügen, um z. B. let user = {name:'john', age:34}auf folgende Weise anzufordern :formData.append("user", JSON.stringify(user));
• Diese Lösung sollte auf allen gängigen Browsern funktionieren.