Progress Bar pour upload de fichiers [Résolu]

Signaler
Messages postés
55
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
3 octobre 2012
-
Messages postés
55
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
3 octobre 2012
-
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 !
A voir également:

7 réponses

Messages postés
55
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
3 octobre 2012

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 !
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Statut
Membre
Dernière intervention
28 février 2012

bonjour,

comme tu utilise deja jquery peut etre ceci

https://github.com/drogus/jquery-upload-progress
Messages postés
55
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
3 octobre 2012

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 !
Messages postés
55
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
3 octobre 2012

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 !
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Statut
Membre
Dernière intervention
28 février 2012

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>
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Statut
Membre
Dernière intervention
28 février 2012

sans jquery oups
Messages postés
55
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
3 octobre 2012

Hello et merci !

Je vais tester merci pour le code et bonne journée !