Progress Bar pour upload de fichiers [Résolu]

Messages postés
55
Date d'inscription
lundi 9 février 2009
Dernière intervention
3 octobre 2012
- - Dernière réponse : cs_AcarnanDragoon
Messages postés
55
Date d'inscription
lundi 9 février 2009
Dernière intervention
3 octobre 2012
- 7 déc. 2011 à 15:37
Bonjour à tous,

Voila mon soucis. J'ai utilisé le système Jqueryfiletree pour créer une arborescence de fichiers qui permet de voir les fichiers, en téléchargé, en uploader, créer des dossiers...

Mais voila, il faut que cette application puisse télécharger des fichiers un petit peu volumineux (150Mo par exemple), le problème c'est que JqueryFiletree ne possède pas de progress bar pour l'upload de fichier, ce qui fait qu'il est difficile de savoir ou on en est dans l'envoi du fichier ;-)

Bref j'ai fouillé sur le net et j'ai notamment trouvé des choses types APC ou swfupload des choses comme ça. Le problème c'est que mes formulaires d'upload sont déjà fait et je galère un peu a essayer de mettre en place une progress bar.

Quelqu'un aurait il une progressbar simple à mettre en place pour l'upload de fichier, sur des formulaires déjà réalisés ?

Bonne soirée à tous ! Et merci pour votre temps !
Afficher la suite 

Votre réponse

7 réponses

Meilleure réponse
Messages postés
55
Date d'inscription
lundi 9 février 2009
Dernière intervention
3 octobre 2012
3
Merci
Pour ceux que ça intéresse j'ai trouvé ceci, qui correspond parfaitement à ce qu'il me faut :

http://webdeveloperplus.com/jquery/multiple-file-upload-with-progress-bar-using-jquery/

Voila Bon codage à tous !

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources a aidé 98 internautes ce mois-ci

Commenter la réponse de cs_AcarnanDragoon
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Dernière intervention
28 février 2012
0
Merci
bonjour,

comme tu utilise deja jquery peut etre ceci

https://github.com/drogus/jquery-upload-progress
Commenter la réponse de camillagaiaschicherie
Messages postés
55
Date d'inscription
lundi 9 février 2009
Dernière intervention
3 octobre 2012
0
Merci
Bonjour et merci de ta réponse,

Je vais regarder ça de près et je reviens pour dire si c'est ce qu'il me fallait. Merci d'avoir pris le temps de chercher et de répondre ! Bonne journée !
Commenter la réponse de cs_AcarnanDragoon
Messages postés
55
Date d'inscription
lundi 9 février 2009
Dernière intervention
3 octobre 2012
0
Merci
Bon, j'ai regardé mais même l'exemple qu'il propose ne fonctionne pas... En fait ce qu'il me faudrait c'est simplement un moyen d'interroger le serveur sur l'état d'avancement de l'upload. Mais jusqu'ici je patauge... Bref je vais continuer de chercher, si quelqu'un à une idée je suis preneur !
Commenter la réponse de cs_AcarnanDragoon
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Dernière intervention
28 février 2012
0
Merci
bonjour,

sans javascript juste avec du html5 cela donne

<!DOCTYPE html>
<html>
<head>
    <title>Upload Files using XMLHttpRequest - Minimal</title>

    <script type="text/javascript">
      function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
          var fileSize = 0;
          if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
          else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

          document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
          document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
          document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        }
      }

      function uploadFile() {
        var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "upload.php");
        xhr.send(fd);
      }

      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }

      function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
        alert(evt.target.responseText);
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }
    </script>
</head>

  <form id="form1" enctype="multipart/form-data" method="post">
    

      <label for="fileToUpload">Select a File to Upload</label>

      
    

    


    


    


    

      
    

    


  </form>

</html>
Commenter la réponse de camillagaiaschicherie
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Dernière intervention
28 février 2012
0
Merci
sans jquery oups
Commenter la réponse de camillagaiaschicherie
Messages postés
55
Date d'inscription
lundi 9 février 2009
Dernière intervention
3 octobre 2012
0
Merci
Hello et merci !

Je vais tester merci pour le code et bonne journée !
Commenter la réponse de cs_AcarnanDragoon

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.