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:

Php upload progress bar
Php upload progress - Meilleures réponses
Php upload script with progress bar - Meilleures réponses
Progress bar c ✓ - Forum C# / .NET
Vba progress bar - Forum Visual Basic
Progress Bar ✓ - Forum Visual Basic
Vb6 progress bar ✓ - Forum Visual Basic 6
Php table - Conseils pratiques -PHP

7 réponses

Réponse 1 / 7

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 !

Réponse 5 / 7

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>

Discussions similaires

Ouvrir form a la fin d'un progressbar

Erreur fopen failed to open stream: No such file or directory !

Progressbar en c#

Progressbar défilante

Utilisation du ProgressBar

Télécharger un fichier avec My.Computer.Network.DownloadFile

Votre réponse

Discussions similaires