JavaScript: Datei hochladen

187

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?

YummyBánhMì
quelle
2
JavaScript verarbeitet die Uploads nicht, da es serverseitig ist. Das serverseitige Skript empfängt die Datei und verschiebt sie dann. Für PHP vom temporären Ordner zum gewünschten Ordner.
Bakudan
14
Zum erneuten Öffnen gewählt, da es sich bei der Frage um POJS (einfaches altes Javascript) und nicht um jQuery handelt.
e2-e4

Antworten:

95

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:

Matt Ball
quelle
oder iframe 0x0 Größe mit Bild-Uploader-Skript in src = "" und senden Sie das Formular mit target = "iframeId" an das Ergebnis, indem Sie das Ergebnis auf das Ereignis iframe src .load zurücklesen, das beispielsweise mit jQuery gebunden werden kann.
Dmitry
11
Heutzutage ist es tatsächlich möglich, über Javascript und Ajax zu upvoten, siehe: stackoverflow.com/a/10811427/694469 (ich habe nicht downvotiert).
KajMagnus
35
@ KajMagnus, Sie meinten wahrscheinlich "Upload", sagten aber versehentlich "Upvote"
Samuel Allan
82

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});

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);

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.
Kamil Kiełczewski
quelle
Arbeite perfekt für mich.
Trieu Nguyen
formData === form submitenctype="multipart/form-data"
xgqfrms
Ich net::ERR_ABORTED 405 (Method Not Allowed)
erhalte
@HidaytRahman Dieser Fehler tritt normalerweise auf, wenn der Server die POST-Methode für Ihre URL nicht implementiert
Kamil Kiełczewski
1
Seltsam