Für Webprogrammierer ist das Hochladen von Dateien auf Webseiten immer eine mühsame Angelegenheit. In der Vergangenheit konnten wir Bilder weder per Drag-and-Drop hochladen, noch verfügten wir über eine komplexe Ajax-Upload-Technologie, und wir haben nur selten Batch-Uploads mehrerer Dateien durchgeführt. Außerdem können wir während des Upload-Vorgangs keine Informationen erhalten, es sei denn, sie werden nach Abschluss des Uploads vom Server abgerufen. Manchmal stellen Sie fest, dass die hochgeladene Datei unangemessen ist, nachdem Sie den Upload abgeschlossen haben!
Heute haben uns die Revolution von HTML5, die Geburt moderner Browser und die Aktualisierung von JavaScript die Möglichkeit gegeben, Javascript und input[type=file]-Elemente zu verwenden, um Informationen über den Prozess des Hochladens von Dateien zu erhalten.
Sehen wir uns an, wie Sie diese Upload-Datei-APIs verwenden!
Greifen Sie auf die hochzuladenden Dateilisteninformationen zu
Wenn Sie die Liste der hochzuladenden Dateien in allen Eingaben[type=file] erhalten möchten, müssen Sie das Dateiattribut verwenden:
// Assuming <input type="file" id="upload" multiple>
var uploadInput = document.getElementById('upload');
uploadInput.addEventListener('change', function() {
console.log(uploadInput.files) // File listing!
});
Leider verfügt diese FileList nicht über eine Methode namens forEach, sodass wir nur altmodische Schleifentechniken verwenden können, um die FileList zu durchlaufen:
for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
console.log(files[i]);
}
Ein sehr wichtiger Punkt: In FileList gibt es ein Längenattribut.
Informationen zu einer einzelnen hochgeladenen Datei abrufen
Jedes Dateiobjekt in FileList speichert eine große Menge an Informationen über die Datei, einschließlich Dateigröße, Datei-MIME-Typ, letzte Änderungszeit, Dateiname usw.:
{
lastModified: 1428005315000,
lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
name: "profile.pdf",
size: 135568,
type: "application/pdf",
webkitRelativePath: ""
}
Der größte Nutzen dieser grundlegenden Informationen besteht für uns darin, dass wir die Dateien überprüfen können, bevor wir sie hochladen. Sie können beispielsweise den Dateityp und die Dateigröße überprüfen:
var maxAllowedSize = 500000;
for (var i = 0, fileCount = uploadInput.files.length, totalSize = 0; i < fileCount; i++) {
totalSize += files[i].size;
if(totalSize > maxAllowedSize) {
// Notify the user that their file(s) are too large
}
if(files[i].type != 'application/pdf') {
// Notify of invalid file type for file in question
}
}
Wenn die Größe der vom Benutzer hochgeladenen Datei zu groß ist, den zulässigen Bereich überschreitet oder der Upload-Typ falsch ist, können Sie den Benutzer am Hochladen hindern und ihm dann die erforderlichen Hinweise geben, warum der Upload nicht möglich ist erfolgreich sein.
Das Obige ist eine kurze Einführung in die Datei-Upload-API. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.
