back to top

HTML5 File API – Esempi

Partiamo dalla semplice lettura di un file con copia del contenuto nel browser; ho utilizzato jQuery solamente per rendere il codice più conciso ed elegante e la closure su fileReader.onload per lo stesso motivo:

<!doctype html>
<html>
  <head>
    <title>Leggere i Files tramite le File APIs</title>
    <style>
      fieldset {
	     width: 500px;
	     padding: 10px;
	     font-size: 11px;
      }
    </style>
    <script src="jquery.js"></script>
    <script>
    
      // # Al DOM Ready
      $(function() {
    	 
    	// # bind dell'evento change
   	    $("#fileinput").change(function(event) {
   	    	
   	      // # in event.target.files trovo l'oggetto FileList
   	      // # in questo caso il file è uno solo quindi lo trovo 
   	      // # nella posizione 0
   	      var file = event.target.files[0];
             
   	      // # Controllo la dimensione del file
   	      if(file.size > 200) {
   	    	  alert("Non sono consentiti file di dimensione maggiore di 200B");
   	    	  return false;
   	      }
   	      
   	      // # Istanzio il fileReader
   	      var fileReader = new FileReader();
   	      
   	      // # Leggo il file
   	      fileReader.readAsText(file);
   	      
   	      // # A caricamento terminato inserisco in pagina il contenuto
   	      fileReader.onload = function (event) {	  
   	    	  $("#contenuto_file").html(event.target.result);
   	      };
   	      
   	    });
      });

    </script>
  </head>
  <body>
  <fieldset><legend>Scegli un file dal filesystem</legend>
    <input type="file" id="fileinput" name="fileinput"><br />
    <output id="contenuto_file"></output>
  </fieldset>
  </body>
</html>

Il risultato in Opera quando proviamo ad inserire un file più grande di 200B:

file size

il processo andato a buon fine al termine del caricamento di un piccolo file di testo:

file read ok

Uno degli aspetti più interessanti riguarda la possibilità di monitorare il progresso del caricamento di un file senza fatica:

<!doctype html>
<html>
  <head>
    <title>Monitorare un upload tramite le File APIs</title>
    <style>
      fieldset {
	     width: 500px;
	     padding: 10px;
	     font-size: 11px;
      }
    </style>
    <script src="jquery.js"></script>
    <script>
    
      // # Al DOM Ready
      $(function() {
    	
    	// # caching del selettore per l'elemento progress
    	var progressBar = $("#progress_bar");
    	  
    	// # bind dell'evento change
   	    $("#fileinput").change(function(event) {
   	    	
   	      // # in event.target.files trovo l'oggetto FileList
   	      // # in questo caso il file è uno solo quindi lo trovo 
   	      // # nella posizione 0
   	      var file = event.target.files[0];
   	      
   	      // # Istanzio il fileReader
   	      var fileReader = new FileReader();
   	      
    	  // # imposto un handler per l'onprogress
   	      fileReader.onprogress = function(event) {
   	   	    
    		// # Se è possibile effettuare il calcolo
     	    if (event.lengthComputable) {
     	      
     	      // # calcolo il loaded, sarà un numero compreso tra 0 ed 1
              var loaded = event.loaded / event.total;
  			  if (loaded < 1) {
  				
  				// # imposto il valore dell'elemento progress
  			    progressBar.attr("value", loaded );
  			  }
            }
     	  };
     	   
     	  // # imposto un handler per l'onerror
       	  fileReader.onerror = function(event) {
            alert("Si è verificato un errore nel caricamento");
         	return false;
          };
          
   	      // # Leggo il file
   	      fileReader.readAsArrayBuffer(file);

   	      // # A caricamento terminato termino 
   	      // # il riempimento della progressbar
   	      fileReader.onload = function (event) {
   	    	 progressBar.attr("value", 1 );
   	    	 alert("Caricamento completato");
   	      };
   	      
   	    });
      });

    </script>
  </head>
  <body>
  <fieldset><legend>Scegli un file dal filesystem</legend>
    <input type="file" id="fileinput" name="fileinput"><br />
    <progress id="progress_bar"></progress>
  </fieldset>
  </body>
</html>

La situazione durante il caricamento di un file di grosse dimensioni in Opera:

file read ongoin

Il risultato visivo al termine del caricamento:

file read complete

Notate nell’esempio la definizione degli handlers per l’evento progress e per l’evento error. Ho utilizzato il nuovo elemento progress per renderizzare la barra, elemento che in questo caso risulta indicatissimo.

Possiamo unire le potenzialità delle File APIs con le Drag&Drop APIs:

<!doctype html>
<html>
  <head>
    <title>File APIs e Drag&Drop</title>
    <style>
      #dropdiv {
	     width: 200px;
	     height: 100px;
	     padding: 10px;
	     border: 2px dashed #999;
	     text-align: center;
	     line-height: 100px;
      }
    </style>
    <script src="jquery.js"></script>
    <script>
    function drop(event) {
    	
    	if(event.preventDefault) {
      	  event.preventDefault();
      	}
    	
    	// # Recupero il file dall'oggetto DataTransfer
        var file = event.dataTransfer.files[0];
 	     
        // # Istanzio il fileReader
 	    var fileReader = new FileReader();
 	      
 	    // # Leggo il file
 	    fileReader.readAsText(file);
 	      
 	    // # A caricamento terminato inserisco in pagina il contenuto
 	    fileReader.onload = function (event) {	  
 	      $("#contenuto_file").append(event.target.result);
 	    };
 	    
 	    return false;
    }
    
    // "Cancel" di dragover
    function dragover(event) {
    	
    	if(event.preventDefault) {
    	  event.preventDefault();
    	}
    	
    	return false;
    }
    
    // "Cancel" di dragenter
    function dragenter(event) {
    	
    	if(event.preventDefault) {
    	  event.preventDefault();
    	}
    	
    	return false;
    }    
    </script>
  </head>
  <body>
    <div id="dropdiv" ondrop="drop(event)" ondragover="dragover(event)" ondragenter="dragenter(event)">Trascina qui un file</div>
    <output id="contenuto_file"></output>
  </body>
</html>

Ecco l’area di deposito prima del caricamento:

file drag start

ed il risultato dopo aver trascinato un file di testo all’interno:

file drag end
Pubblicità

In questa guida...