Soubor API

Práce s nahráváním souborů, zejména na frontendu, byla vždy obtížná. Nebyli jsme zvyklí přetahovat soubory, dokončit nahrávání AJAX, poskytovat více souborů a sakra, nemohli jsme získat žádné informace o souboru, dokud se nedostal na server; museli byste ten zatracený soubor nahrát, než ho budete moci odmítnout!

V současné době máme File API, které nám poskytuje přístup k informacím o souborech prostřednictvím JavaScriptu a input[type=file] živel. Pojďme se podívat, jak funguje File API!

Přístup k souborům

Chcete-li získat seznam souborů namapovaných na daný input[type=file] , použijete files vlastnost:

// Assuming <input type="file" id="upload" multiple>

var uploadInput = document.getElementById('upload');

uploadInput.addEventListener('change', function() {
	console.log(uploadInput.files) // File listing!
});

Bohužel FileList nemá forEach metodu, jako je Array, takže budeme muset udělat nějaké oldschoolové smyčkování přes FileList :

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
  console.log(files[i]);
}

Je důležité si uvědomit, že FileListlength vlastnost.

Získání informací o souboru

Každý soubor v FileList poskytuje dobrou sadu informací o každém souboru, včetně velikosti souboru, typu MIME, data poslední úpravy a názvu:

{
	lastModified: 1428005315000,
	lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
	name: "profile.pdf",
	size: 135568,
	type: "application/pdf",
	webkitRelativePath: ""
}

Na získání těchto informací o souboru je hezké, že před nahráním souboru můžete provést základní ověření. Můžete například ověřit typ MIME nebo celkovou velikost souboru:

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

Celková velikost souboru je příliš velká nebo soubor neprošel testem? Nyní můžete uživateli předložit zprávu, aniž byste museli soubor nejprve nahrát a posoudit.

To je můj rychlý pohled na File API. Je to roztomilé rozhraní API, které vám i vašemu uživateli může ušetřit čas promarněný nahráváním. Je toho mnohem víc, než se dá udělat pomocí souborového API, z nichž mnohé najdete na MDN.