Progress Bar pour upload de fichiers [Résolu]

cs_AcarnanDragoon 55 Messages postés lundi 9 février 2009Date d'inscription 3 octobre 2012 Dernière intervention - 24 nov. 2011 à 18:14 - Dernière réponse : cs_AcarnanDragoon 55 Messages postés lundi 9 février 2009Date d'inscription 3 octobre 2012 Dernière intervention
- 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
cs_AcarnanDragoon 55 Messages postés lundi 9 février 2009Date d'inscription 3 octobre 2012 Dernière intervention - 25 nov. 2011 à 15:58
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 !

Merci cs_AcarnanDragoon 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 86 internautes ce mois-ci

Commenter la réponse de cs_AcarnanDragoon
camillagaiaschicherie 58 Messages postés vendredi 23 mai 2008Date d'inscription 28 février 2012 Dernière intervention - 25 nov. 2011 à 01:02
0
Merci
bonjour,

comme tu utilise deja jquery peut etre ceci

https://github.com/drogus/jquery-upload-progress
Commenter la réponse de camillagaiaschicherie
cs_AcarnanDragoon 55 Messages postés lundi 9 février 2009Date d'inscription 3 octobre 2012 Dernière intervention - 25 nov. 2011 à 09:19
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
cs_AcarnanDragoon 55 Messages postés lundi 9 février 2009Date d'inscription 3 octobre 2012 Dernière intervention - 25 nov. 2011 à 10:02
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
camillagaiaschicherie 58 Messages postés vendredi 23 mai 2008Date d'inscription 28 février 2012 Dernière intervention - 25 nov. 2011 à 17:32
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
camillagaiaschicherie 58 Messages postés vendredi 23 mai 2008Date d'inscription 28 février 2012 Dernière intervention - 25 nov. 2011 à 17:33
0
Merci
sans jquery oups
Commenter la réponse de camillagaiaschicherie
cs_AcarnanDragoon 55 Messages postés lundi 9 février 2009Date d'inscription 3 octobre 2012 Dernière intervention - 7 déc. 2011 à 15:37
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.