iBFile

iBFile è un plugin scritto in javascript per poter facilmente gestire upload di file, nasce dall’esigenza di un tool semplice,leggero e funzionale per poter caricare agevolmente più file in una sola volta.

Supporta invio multiplo di file attraverso form multipart, in ogni elemento si possono inserire nuove classi per poter liberamente modificare la visualizzazione dei vari elementi.

Caratteristiche

Di seguito le principali caratteristiche di questo plugin

• Richiede solo il framework jQuery
• Si integra in nodi form multipart
• Indipendente dal framework css scelto
• Supporta l’invio di file multipli
• Grafica minimale

Installazione

Per integrazione iBFile basta includere il relativo file js, fatto ciò tutti i blocchi con classe “iBFile” verrannoautomaticamente inizializzati

...
<script src="jquery.min.js"></script>
<script src="iBFile.js"></script>
...

In caso si volesse inizializzare un blocco con iBfile, basta richiamare manualmente il codice:

 $('#my_file_uploader').iBFile()

Personalizzazione

Il pugin è stato scritto al framework Foundations di conseguenza senza bisogno di effettuare nessuna configurazione l’aspetto grafico degli elementi sarà uguale a quello mostrato negli esempi successivi, e comunque possibile configurarlo per poter supportare altri framerwork o css scritto ad-hoc.

La personalizzazione può essere fatta modificando opportunamente due oggetti esposti dal plugin:

• window.iBFileGlobal.conf: Un oggetto che contiene gli attributi per modificare le classi degli elementi grafici del plugin
• window.iBFileGlobal.templates: Un oggetto che contiene i “template” utilizzati pergli elementi grafici (da modificare solo se veramente necessario)

La modifica dei parametri non è retroattiva di conseguenza bisogna assicurarsi di inizializzare l’oggetto iBFile DOPO aver configurato correttamente il plugin, altrimenti questi non avranno effetto, è comunque possibile modificare in “al volo” i parametri di un oggetto iBFile modificando gli attributi “.conf” e “.template” .

Valore di Default: "< button class='$1'>$2 < / button>"

Esempio

Qui di seguito, alcuni esempi per inizializzare il plugin.

Il primo esempio mostra come inizializzare il blocco attraverso la procedura automatica.

<form method="post"  enctype="multipart/form-data">
   <div class="iBFile"></div>
   <input type="submit" class="button success" value="Upload!"/>
</form>

Il secondo esempio mostra come inizializzare manualmente.

<form method="post"  enctype="multipart/form-data">
   <div id="my_file_uploader"></div>
   <input type="submit" class="button success" value="Upload!"/>
</form>
    
<script>
   $("#my_file_uploader").iBFile();
</script>

L’esempio qui sotto riporta invece un esempio di configurazione del plugin modificando alcune impostazione globali,da notare che prima sono state fatte le modifiche alle configurazioni e poi è stato inizializzato l’elemento iBFile

<form method="post"  enctype="multipart/form-data">
   <div id="my_file_uploader_conf"></div>
   <input type="submit" class="button success" value="Upload!"/>
</form>
    
<script>
   window.iBFileGlobal.conf.buttonText = "Click HERE!";
   window.iBFileGlobal.conf.buttonClass = "small-6 info";
   window.iBFileGlobal.conf.boxFileClass = "row";
                
   window.iBFileGlobal.conf.boxClass = "alert-box text-center error";
   window.iBFileGlobal.templates.boxFile= '<div class="column small-3 text-center"><div  class="box-disabled" title="$3"><i class="fi-page" id="$2" ></i></div></div>';
   $('#my_file_uploader_conf').iBFile();
</script>

Download

Questo plugin è sviluppato e mantenuto su Github.