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?
javascript
file-upload
YummyBánhMì
quelle
quelle
Antworten:
Wenn Sie nicht versuchen, die Datei mit Ajax hochzuladen, senden Sie das Formular einfach an
/upload/image
.Wenn Sie das Bild im Hintergrund hochladen möchten (z. B. ohne das gesamte Formular zu senden), können Sie ajax verwenden:
quelle
Pure JS
Sie können fetch optional mit await-try-catch verwenden
Code-Snippet anzeigen
Old School Ansatz - xhr
Code-Snippet anzeigen
ZUSAMMENFASSUNG
filename
den Parameter formData aufgenommen werden, um vom Browser angefordert zu werden.Content-Type
zumultipart/form-data
- dies durch Browser automatisch eingestellt wird./upload/image
können Sie die vollständige Adresse wie verwendenhttp://.../upload/image
.multiple
Attribut:<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);
).let user = {name:'john', age:34}
auf folgende Weise anzufordern :formData.append("user", JSON.stringify(user));
quelle
enctype="multipart/form-data"
net::ERR_ABORTED 405 (Method Not Allowed)