FileReader API

Jak se rychlost širokopásmového připojení neustále zvyšuje, web je stále více zaměřen na média. Někdy to může být dobré (Netflix, jiné streamovací služby), někdy to může být špatné (chcete si přečíst zpravodajský článek, ale má doprovodné zbytečné video). A každá sociální služba dělá vše, co může, aby zobrazila obrázek s libovolným nahráním uživatele.

Jedna věc, kterou jsem na práci se soubory poskytnutými uživateli nenáviděla, bylo jejich hostování někde na serveru: nahrané soubory zabírají místo na disku a v některých případech se stávají bezpečnostním problémem....až dosud. FileReader API vám umožňuje přistupovat k uživatelským souborům a jejich obsahu z jejich počítače, aniž byste je museli nahrávat na váš server.

HTML

FileReader API funguje mimo premisu File API, a proto vyžaduje input[type="file"] prvek:

<-- Let's go big and enable for multiple file uploads -->
<input type="file" id="upload-file" multiple />

<-- We'll display the image in this DIV -->
<div id="destination"></div>

Přečtěte si můj příspěvek File API, kde se dozvíte více o tom, co poskytuje, jako je umístění, velikost, typ a další.

JavaScript

Tento příklad vyžaduje výběr obrázku v rámci input; jakmile uživatel na svém počítači vybere obrázek, obrázek se má zobrazit na stránce:

document.getElementById('upload-file').addEventListener('change', function() {
	var file;
	var destination = document.getElementById('destination');
	destination.innerHTML = '';

	// Looping in case they uploaded multiple files
	for(var x = 0, xlen = this.files.length; x < xlen; x++) {
		file = this.files[x];
		if(file.type.indexOf('image') != -1) { // Very primitive "validation"

			var reader = new FileReader();

			reader.onload = function(e) {
				var img = new Image();
				img.src = e.target.result; // File contents here

				destination.appendChild(img);
			};
			
			reader.readAsDataURL(file);
		}
	}
});

Tento příklad používá FileReader 's readAsDataURL metoda pro převod obsahu souboru na řetězec zakódovaný v base64, který lze použít jako identifikátor URI obrazových dat pro src atribut. Ostatní FileReader typy čtení zahrnují readAsText , readAsArrayBuffer a readAsBinaryString .

S tímto API se můžete vyhnout odesílání nezpracovaných uživatelských souborů na server, což miluji. Před ručním nahráním uživatelského obsahu na vaše servery můžete také předem upravit obsah. Příkladem, kde se to používá, je testbed smartcrop.js. Podělte se o další nápady na použití, pokud je máte!