Appunti su JavaScript

§ 1. Introduzione

HTML5 fornisce un metodo standard per interagire con i file locali, tramite la File API.

L'API FILE definisce le seguenti tre interfacce:

• File <input type=file>
• FileList <input type=file multiple >
• Blob, Binary Large Object
• FileReader, per leggere File e Blob

Nota Per verificare se il browser supporta una interfaccia, basta verificare se essa è presente nell'oggetto window con il test window['nomeinterfaccia'] o window.nomeInterfaccia. Se l'interfaccia è supportata il test restituisce il valore logico true.

Per capire se l'API File è pienamente supportata dal browser basta eseguire questo test:

if(window.File && window.FileList && window.Blob & window.FileReader)

§ 1.1 Oggetto window

L'interazione con il browser viene realizzata tramite oggetti che forniscono informazioni sull'ambiente di esecuzione e funzionalità. Window è uno di questi oggetti e costituisce il contesto di esecuzione di JavaScript.

Proprietà di window:

• innerWidth e innerHeight
• window.screen.width e window.screen.height
• window.screen.availWidth e window.screen.availHeight
• window.frames.length, frames[i].location.href
• window.alert, window.confirm, window.prompt
• window.open("popup file path", "popup name"
• window.setInterval, setTimout, clearInterval, clearTimeout
• window.history window.location

§ 1.1.1 Esempio di window.history.back()

TestHistoryBack

§ 2. Esempi

§ 2.1 Uso di una form di input per selezionare i file

La via più diretta per caricare un file à usare l'elemento standard <input type="file"> JavaScript restituisce la lista degli oggetti File selezionati in un oggetto FileList.

§ 2.2 Uso di drag and drop per selezionare file

Un altra tecnica per caricare file è la nativa drag and drop dal desktop al browser. Il precedente esempio viene leggermente modificato per includere il supporto drag and drop.

Su questa cosa sono semplicemente in altomare.

§ 2.3 Uso del metodo addEventListener per innescare un event handler per la manipolazione di un file

§ 2.4 Selecting Multiple Files

Ecco una form contenente un campo di input che consente di selezionare un file.

§ 2.5 Un file reader

Ho copiato questo esempio, senza, al momento, capirci un gran chè.

§ 3. L'esempio dell'introduzione della specifica API FILE

Ecco una form contenente un campo di input che consente di selezionare un file.

§ 4. Ora ricomincio da capo.

Mi sono praticamente esaurito per capire il precedente esempio dell'interfaccia fileReader. Ho sbattuto la testa su un sacco di concetti avanzati sulle funzioni di javascript quali named function expression, function that return another function, closure, self-executing anonymous function and passing an argument to a self-executing anonymous function

Sicuramente chi ha sviluppato l'esempio è un virtuoso di javascritp ma secondo me nell'articolo in questione avrebbe dovuto focalizzarsi soprattutto sulla interfaccia API ricorrendo, se possibile, ad una programmazione più elementare.

Voglio provare a fare questo:

1. Con il blocco notes scrivo un semplicissimo file di testo, mioNome.txt, contenente il mio nome e cognome.
2. Creo un campo di input di tipo file per selezionare un file
3. Creo un campo di output dove visualizzare le proprietà del file mioNome.txt
4. Creo un campo di output dove visualizzare il contenuto del file mioNome.txt
5. Creo un eventHandler per:
   1. visulizzare le proprietà del file mioNome.txt
   2. istanziare un fileReader
   3. leggere il file mioNome.txt
   4. visulizzare il contenuto di mioNome.txt

Ho già creato mioNome.txt. Ecco cosa contiene:

Claudio Minelli
tel: 333.555.666.666
email: miaMail@gmail.com

Creo i campi di input e di output:

                     <input id="myFile" type="file">
                     <output id="proprietà"></output>
                     <output id="contenuto"></output>

Nota

Il processamento eseguito dallo script, specificato con l'attributo action, è la visualizzazione dei parametri inseriti nella form. Ecco il codice. echoParametriPost.php