Javascript Files Api

Javascript Files Api pozwala na dostęp do informacji o pliku jeszcze przed jego wysłaniem na serwer. Przedstawię wycinek files api - FileReader API. Stwórzmy dokument html a w sekcji body dodajmy

<input id="files" type="file" name="files[]" multiple="multiple" />
<div id="preview">
</div>
<div id="info"></div>
<input id="sub" type="submit" value="Dodaj" />

Napiszemy skrypt, dzięki któremu po wybraniu zdjęcia i kliknięciu na przycisk Dodaj będzie dodawał miniaturkę zdjęcia do diva o id preview. Najpierw w zmiennej files zapisujemy nasze zdjęcia. Jest to tzw. obiekt FileList. Tworzymy obiekt FileReader, dzięki któremu uzyskamy dostęp do informacji o zdjęciu. Pętlą przechodzimy przez pliki. Jeśli typ pliku nie wskazuje na zdjęcie pokazujemy odpowiedni komunikat. W przeciwnym razie dzięki readerowi wczytujemy zdjęcie. Po jego załadowaniu dołączamy miniaturkę do diva o id preview. Cały kod javascript poniżej.

$('input#sub').click(function(e) {
	var files = $('#files')[0].files; // FileList object
	var reader = new FileReader();
	for (var i = 0, f; f = files[i]; i++) 
	{
		if(files[i].type!='image/jpeg' && files[i].type!='image/png' && files[i].type!='image/gif')
		{
			$('div#info').html('Plik musi być zdjęciem');
		}
		else
		{
			reader.onload = (function(file) {
				return function(e) {
					$('div#preview').append('<img src="'+e.target.result+'" alt="" style="width:160px;" />');
				};
			})(files[i]);
			reader.readAsDataURL(files[i]);
		}
	}
	return false;
});

Przykład js files api