Jquery upload avec barre de progression en HTML5 et php

Aujourd’hui nous allons voir comment uploader des fichiers via jquery et html5, sans iframe ni aucun trick naze. Cet article est une mise à jour extrême de l’article du même nom.

BIG MAJ : J’ai dev un plugin jQuery afin de simplifier encore plus la chose. Allez sur le site pUploady !
Salut !

Le HTML :

<form id="piquante" action="" enctype="multipart/form-data" method="post"><input name="fichier" type="file" /> <input id="sauce" type="submit" value="Envoyer le fichier" /></form>

Le JS :

$("#piquante").on("submit", function(event){
   event.preventDefault(); //On empêche de submit le form
   var form = $(this);
   var formdata = false;
   if (window.FormData){
      formdata = new FormData(form[0]);
}
var formAction = form.attr('action');
$.ajax({
   xhr: function() { // xhr qui traite la barre de progression
   myXhr = $.ajaxSettings.xhr();
   if(myXhr.upload){ // vérifie si l'upload existe
      myXhr.upload.addEventListener('progress',afficherAvancement, false);
   }
return myXhr;
 },
   url         : 'upload.php',
   data        : formdata ? formdata : form.serialize(),
   cache       : false,
   contentType : false,
   processData : false,
   type        : 'POST',
   success     : function(data, textStatus, jqXHR){
   // Callback code
 
 }
 });
 });
 
function afficherAvancement(e){
   if(e.lengthComputable){
      $('progress').attr({value:e.loaded,max:e.total});
   }
}

 

le PHP dans upload.php

move_uploaded_file($_FILES['fichier']['tmp_name'],"fichier/{$_FILES['fichier']['name']}");

Done.

Trop cool n’est ce pas ? Vous pouvez telecharger la version plugin jQuery en cliquant ici !

Commentaires (5)

  1. Pascal

    Ton plugin est juste génial !!!
    Un grand merci ! Vraiment !!!

    Par contre, est-ce que tu penses qu’il serait possible de faire un légère modif … ?
    Laisser la barre de chargement upload mais supprimer la pop up qui suit qui indique que le fichier c’est bien uploadé.
    Et faire plutôt un retour dans un div ayant un id bien précis.

    Un peu comme là :
    Page :

    Dans le php : si tout ce passe bien : echo ‘Success’;

    Dans le js :
    success: function(data){
    if(data == ‘Success’){
                
    $(« #ajout_doc_message »).html(« Merci pour la participation, le document sera visible rapidement dès sa validation. »);
                }
                else{
                    $(« #ajout_doc_message »).html(« Erreur …Plusieurs erreurs possibles … »);
                }
    }

    Si tu pense que la modif est réalisable ?
    Je suis grandement preneur et bien d’autre aussi je pense ! Car du coup il pourrait s’intégrer completement dans nos css …

    Encore merci !

    Répondre
    1. orugari (Auteur de l'article)

      Salut,
      Désolé pour le temps de réponse. Je vais vraiment devoir faire une mise à jour, incluant ces changements et d’autre, je te tiens au courant !

      Répondre
      1. muller gilles

        Bonjour,

        je souhaite savoir s’il est possible de télécharger le fichier et d’avoir l’affichage dans la foulée, je suis obligé d’actualiser manuellement la page pour voir mon téléchargement. Sinon, super module !

        Répondre
  2. Fazio

    Très bon article, mais il y a plusieurs fautes de transcription, notamment les  » et ‘ qui ne sont pas corrects. Ce n’est qu’un aperçu des diverses erreurs qui se trouvent dans ce code. Il ne peut donc pas être « Copier-Coller » en l’état.

    Répondre
    1. orugari (Auteur de l'article)

      A la base les  » (<= la preuve...) sont corrects, mais j'ai du changer pour que wordpress ne convertisse pas. La balise pre ne fonctionne pas super non plus. Je vais voir pour editer afin de rendre le code copiable. Aussi, il ne fonctionne pas ? J'ai pourtant copié via ma page de test ^^' Possible que j'ai fait une erreur en éditant le billet wp ! EDIT : Bon c'est vrai que le code etait un peu degueulasse. J'ai nettoyé et donné une meilleure forme ! Merci pour le commentaire en tout cas

      Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

GoSW

Please type the text above: