Home

Bootstrap Fileinput est un widget d’upload multiple complet pour Twitter Bootstrap.

Bootstrap Fileinput est un widget d'upload multiple complet pour Twitter Bootstrap.

Si vous cherchez à remplacer votre champ d’upload HTML classique, voici un widget intéressant à bookmarker pour votre prochain site sous Bootstrap.

En effet, Bootstrap Fileinput est un widget dédié au framework CSS Bootstrap qui remplacera le traditionnel input file HTML par un widget d’upload plus poussé.

Le widget utilise des API HTML5 comme l’API FileReader, on oubliera donc Internet Explorer 9 et moins pour l’upload multiple. Toutefois, sur ces navigateurs, le champ d’upload se comportera comme un champ classique, donc en version dégradée.

Côté fonctionnalités, on est plutôt bien lotis:

  • Prévisualisation des fichiers à uploader
  • Upload multiple de fichiers
  • Personnalisation complète du champs d’upload en CSS
  • Affichage des parties souhaitées du widget
  • Fichiers textes et images prévisualisés
  • Personnalisation des messages (Preview, progress, fichiers sélectionnés)
  • Etat désactivé ou lecture seule
  • Système de templates pour l’affichage des fichiers en preview

A configurer via les attributs data-* ou directement en Javascript (jQuery):

1.<input id="input-id" type="file" class="file" multiple="true" data-show-upload="false" data-show-caption="true">
1.$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

Vous pourrez installer facilement le widget via Bower, Composer ou directement à la main.

A tester pour améliorer l’expérience utilisateur !

Site Officiel

Advertisements

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s