Come visualizzare l'anteprima delle immagini prima di effettuarne l'upload, con HTML5 e Javascript

di Giulio di Bari :: 12 novembre 2020

Un'ottima funzionalità da implmentare in un backend è il mostrare l'anteprima delle immagini prima del loro caricamento, quindi subito dopo la selezione dell'immagine ma prima di cliccare sul pulsante di upload.

Vediamo come ottenere questa anteprima utilizzando HTML 5 e JavaScript.

Creiamo un file chiamato "index.html" al cui interno inseriamo questo codice

<!DOCTYPE html>
<html lang='it'> 
<head>
<meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Tutorial HowTo WebArea</title>
<script type='text/javascript' src='my.js'></script>
<link href='my.css' rel='stylesheet' />
</head>
<body>
Carica file<br />
<input type="file" name="myfile" id="myfile" />
<div id="output"></div>
</body>
</html>

Questo codice è molto semplice.

Nella header abbiamo l'inclusione del file "my.js", in cui inseriremo tra poco il nostro javascript, ed uil file "my.css" dove inseriremo qualche stile basico per la nostra pagina.

Nel body abbiamo un campo di tipo "file" necessario per effettuare l'upload del file sul server, e l'elemento <div id="ouputp"> dove andremo a visualizzare l'anteprima delle immagini.

Nel file "my.css" inseriamo solo questo codice, servirà per dimensionare l'anteprima delle immagini: diamo una altezza di 75px, con un bordo di 1px, ed un margine top di 10px e destro di 10px

.img-thumbnail {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 10px 0 0;
}

Adesso veniamo all'elemento chiave del nostro lavoro, cioè il file "funzioni.js" al cui interno inseriamo questo codice

function anteprimaFile(evt) {
	var file = evt.target.files;
	var f = file[0];
	if (!f.type.match('image.*')) {
		alert("Attenzione: il file selezionato deve essere una immagine");
		return false;
	}

	var reader = new FileReader();

	reader.onload = (function(theFile) {
		return function(e) {
		  document.getElementById('output').innerHTML = '<img class="thumb" title="'+escape(theFile.name)+'" src="'+e.target.result+'" />';
		};
	})(f);

	reader.readAsDataURL(f);
}

document.addEventListener("DOMContentLoaded", function() {
	document.getElementById('myfile').value='';
	document.getElementById('output').value='';
	document.getElementById('myfile').addEventListener('change', anteprimaFile, false);
});

Cominciamo con la fine dello script.

Con "document.addEventListener("DOMContentLoaded", function() {..........}" attendiamo che la pagina venga interamente caricata, ed in quel momento ripuliamo i campi "myfile" e "output" (nel caso avessimo già caricato delle immagini), e facciamo in modo che il javascript resti in ascolto sul campo "myfile": in caso di modifica dello stesso ("change") verrà richiamata la funzione "anteprimaFile".

Questa funzione verifica innanzitutto che il file caricato sia una immagine. Viene verificata la tipologia, e cioè il mime type, del file (image/jpeg, image/png...). Se non fosse una immagine verrebbe visualizzato un alert di avviso.

Per visualizzare il contenuto del file, cioè l'immagine, creiamo una istanza dell’oggetto FileReader che serve a leggere il contenuto di un file presente nel nostro computer.

Tenete presente della compatibilità di FileReade con i browser.

Abbiamo quindi invocato il metodo readAsDataURL passandogli l’immagine da leggere.

Il metodo readAsDataURL è utilizzato per gestire file di tipo binario, come nel nostro esempio le immagini. Il contenuto del file viene interpretato come "data URL", cioè come una rappresentazione in base64 del contenuto del file. Ad esempio avrà questo valore:

data:image/jpg;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7

Questo valore è contenuto in "e.target.result", se provate infatti a fare un alert("e.target.result") vedrete il file rappresentato in base64.

Letta l'immagine, viene inserita nel div "outup" della pagina.

Tutto qui. L'unica questione a cui prestare attenzione è la compatibilità di FileReader con i browser che potete verificare cliccando qui.

Se vuoi testare questo esempio ecco il link per il test, ed il progetto da scaricare.

DEMO

SCARICA