Progress Bar pour upload de fichiers

Résolu
cs_AcarnanDragoon
Messages postés
55
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
3 octobre 2012
- 24 nov. 2011 à 18:14
cs_AcarnanDragoon
Messages postés
55
Date d'inscription
lundi 9 février 2009
Statut
Membre
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 !
A voir également:

7 réponses

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

25 nov. 2011 à 15:58
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 !
3
camillagaiaschicherie
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Statut
Membre
Dernière intervention
28 février 2012

25 nov. 2011 à 01:02
bonjour,

comme tu utilise deja jquery peut etre ceci

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

25 nov. 2011 à 09:19
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 !
0
cs_AcarnanDragoon
Messages postés
55
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
3 octobre 2012

25 nov. 2011 à 10:02
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 !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
camillagaiaschicherie
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Statut
Membre
Dernière intervention
28 février 2012

25 nov. 2011 à 17:32
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>
0
camillagaiaschicherie
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Statut
Membre
Dernière intervention
28 février 2012

25 nov. 2011 à 17:33
sans jquery oups
0
cs_AcarnanDragoon
Messages postés
55
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
3 octobre 2012

7 déc. 2011 à 15:37
Hello et merci !

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