Stel dat ik dit element op de pagina heb:

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

Hierdoor wordt een knop gemaakt waarmee gebruikers van de webpagina een bestand kunnen selecteren via een OS-dialoogvenster “Bestand openen…” in de browser.

Stel dat de gebruiker op de genoemde knop klikt, een bestand selecteert in het dialoogvenster en vervolgens op de knop “Ok” klikt om het dialoogvenster te sluiten.

De geselecteerde bestandsnaam is nu opgeslagen in:

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

Laten we zeggen dat de server POST’s uit meerdere delen afhandelt op de URL “/upload/image”.

Hoe stuur ik het bestand naar “/upload/image”?

Hoe kan ik ook luisteren naar een melding dat het bestand klaar is met uploaden?

Antwoord 1, autoriteit 100%

Pure JS

U kunt optioneel fetchgebruiken met wait-try- vangen

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

Antwoord 2, autoriteit 64%

Tenzij u het bestand probeert te uploaden met ajax, verstuurt u het formuliernaar /upload/image.

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

Als je de afbeelding op de achtergrond wilt uploaden (bijvoorbeeld zonder het hele formulier in te dienen), kun je ajax gebruiken:

• Asynchrone bestand Upload (Upload) met Ajax JSP en Javascript
• JQuery Ajax-bestand uploaden
• Ajax met behulp van bestand Upload

Antwoord 3

Ik heb dit al een tijdje geprobeerd en geen van deze antwoorden werkte voor mij. Dit is hoe ik het deed.

Ik had een selecteerbestand en een verzendknop

<input type="file" name="file" id="file">
<button onclick="javascript:doupload()" name="submit">Upload File</button>

Dan in mijn JavaScript-code, doe ik dit

function doupload() {
    let data = document.getElementById("file").files[0];
    let entry = document.getElementById("file").files[0];
    console.log('doupload',entry,data)
    fetch('uploads/' + encodeURIComponent(entry.name), {method:'PUT',body:data});
    alert('your file has been uploaded');
    location.reload();
};

Wat is het verschil tussen mijn antwoord en andere antwoorden?

Andere antwoorden zouden gebruiken
fetch('/upload/image', {method: "POST", body: formData});
Maar wanneer ik dit deed, kreeg ik net een 404-fout omdat het op zoek was naar een bestand om te downloaden in plaats van uploaden.

ik gebruik
fetch('uploads/' + 'filename.txt', {method:'PUT',body:data});
In plaats van het bestand aan te vragen, plaatst het het bestand en vertelt de server welke gegevens moeten worden geplaatst.

Getest met webserver voor Chrome –
https://chrome.google.com/ webwinkel/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=nl

Opmerking- Wanneer u een webserver voor Chrome gebruikt, moet u naar de geavanceerde opties gaan en de optie ‘bestandsupload inschakelen’ aanvinken. Als u dit niet doet, krijgt u een foutmelding voor niet toegestaan.