21
MARS

jQuery File Upload - Un uploader complet en HTML5 et jQuery

Publié le 21/03/12 à 09h34 par DJo

jQuery File Upload est un plugin d'upload de fichier HTML5 complet et basé sur Twitter Bootstrap.

jQuery File Upload est un plugin d'upload de fichier HTML5 complet et basé sur Twitter Bootstrap.

Récemment mis à jour, jQuery File Upload fait partie des uploader de fichiers qui proposent des fonctionnalités complètes et très dans l'ère du temps.

En effet, jQuery File Upload est doté de nombreuses fonctionnalités:

  • Upload multiple avec sélection multiple de fichiers
  • Queue d'attente des upload
  • Contrôle de chaque fichier à uploader: Démarrer, annuler, supprimer.
  • Contrôle en masse de la queue des fichiers: Démarrage des upload, annuler ou supprimer
  • Preview des images à uploader et poids
  • Progress bar pour la progression de l'upload
  • Drag and drop de fichiers pour les navigateurs compatibles HTML5
  • Etc

L'interface de la démo est basée sur Twitter Bootstrap mais il est tout à fait possible de le personnaliser dans un design fait maison.

Un grand nombre d'options et de callbacks vous permettront de configurer au mieux le plugin et le faire interragir avec le reste de votre application.

<input id="fileupload" type="file" name="files[]" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: 'server/php/',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

Côté serveur, peut importe le langage utilisé, il suffit de traiter l'upload comme en PHP classique.

Plusieurs tutoriels d'intégration du plugin côté serveur sont disponibles dans de nombreux langages et frameworks (Il manque tout de même Symfony2 ! Qui se dévoue?).

Sinon côté compatibilité navigateurs, si vous souhaitez utiliser les fonctionnalités avancées comme le drag and drop ou l'upload multiple, il faudra oublier Internet Explorer, sinon les navigateurs modernes sont bien pris en compte.

 

A tester dans votre prochain backoffice :)

Site Officiel

Baraguiné par papiercanson le 21/03/12 à 13h24
papiercanson via Twitter
C'est celui que j'utilise dans mes backoffice. Rien à signaler ça fonctionne impeccablement. Le wahoo effect (même si nous ça fait longtemps qu'on joue avec) du glisser/déposer est un sacré plus chez les clients.
Baraguiné par le 21/03/12 à 21h17
j'ai mis à jour le wiki pour l'intégrer à codeigniter :D

une tite merveille
Baraguiné par le 09/04/12 à 12h46
Bonjour,

Je suis très intéressé par cet outil, mais je n'arrive pas à l'intégrer correctement sur mon site.

Vous avez précisé dans le billet qu'il existait plusieurs tutoriels dont un en PHP. Pourriez vous me dire où le trouver ?

Merci d'avance !
Baraguiné par Tatsu le 11/04/12 à 10h46
Tatsu sur La Ferme du Web
J'avoue que l'intégration n'est pas si évidente que ça. J'utilise PHP et Smarty et je galère un peu dans mes réglage (ces histoires de dossiers, sous-dossiers,...). Sans compter le css bourré de trucs inutiles :/

Mis à part cela, il est tout à fait correcte, et c'est sans doute le meilleur de tous ceux que j'ai testé.
Baraguiné par le 12/04/12 à 23h59
Je vais le mettre de coté ça peux toujours servir.
Baraguiné par le 16/04/12 à 14h08
Très bon outil mais un tuto (en français) sur celui-ci serait plutôt cool car compliqué à modifier.
Baraguiné par manel2010 le 03/10/12 à 17h53
manel2010 via Twitter
Je suis très intéressé par cet outil,
Baraguiné par cainmaro le 26/03/13 à 17h03
cainmaro sur La Ferme du Web
Bonjour à tous,

Je m'arrache les cheveux depuis ce matin en essayer d'intégrer jQuery File Upload et/ou fine uploader sans succès.
J'ai vraiment du mal à comprendre à quel endroit on définit le dossier de réception pour ces 2 APIs.
Quelqu'un saurait-il comment l'intégrer sous JSP svp ?

Merci d'avance de l'aide que vous pourrez m'apporter...
Baraguiné par ukrcifra le 04/12/13 à 19h23
ukrcifra sur La Ferme du Web
????????? ?????
?????? ???????? ????????????? ?????? ?? ???????????? ? ???????????????? ????????? ????? c ?????? VHS, VHS-C, S-VHS, Video8 (8mm), Hi8, Digital8, MicroMV ? MiniDV (SD ? HDV) ?? DVD ???? (???), ????????? (HDD (?????????) ??? ???? ?????? (??????)). ????????? ????? ?? ????? ??????? ??????. ????????? ??? ????????? ?????: http://www.ukrcifra.com/index-digitization-video.html
????????? ?????
Baraguiné par Jielde le 12/06/15 à 01h38
Jielde sur La Ferme du Web
Bonjour,

J'utilise jQuery-File-Upload en basic. Mais impossbile d'ajouter un bouton "Cancel" sur un fichier dans ma liste.

Pouvez-vous m'aider ?

Cordialement, Jielde.

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web