Upload de fichier avec barre de progression

lamouche -  
 lamouche -
Bonjour,
J'ai créé ce petit script qui permet un upload de fichier avec barre de pregression. Cependant, ça ne fonctionne pas.
Voici mon code:
HTML: 
<html>
  <head>
    <meta charset="utf-8" />
    <title>Test Upload</title>
  </head>

  <body>

    <form id="formulaire" method="post" enctype="multipart/form-data" action=""> 
        <label> Choisissez votre fichier à uploader: </label>
        <input id="file" type="file" name="input" multiple/>
        <br /><br />
        <progress id="progress"></progress>
        <input type="submit" value="Envoyer"/>
    </form>


JAVASCRIPT: 

var formulaire = document.querySelector('#formulaire'),
        fileInput = document.querySelector('#file'),
        progress = document.querySelector('#progress');

    formulaire.onsubmit = function() {

        var xhr = new XMLHttpRequest();

        xhr.open('POST', 'upload.php');

        xhr.upload.onprogress = function(e) {
            progress.value = e.loaded;
            progress.max = e.total;
        };
        
        xhr.onload = function() {
            alert('Upload terminé !');
        };

        var form = new FormData();
        form.append('file', fileInput.files[0]);

        xhr.send(form);

    };


Ce qui est bizare, c'est que si je remplace formulaire.onsubmit = function() { par fileInput.onchange = function() {, ça fonctionne, enfin, je ne suis pas sur que ça fonctionne vraiment, car le fichier, meme volumineux, ce charge vraiment très rapidement
Bref, pouquoi avec onchange ça à l'air de marcher et pas avec onsubmit.

Voila, merci pour votre aide.
Très cordialement...
A voir également:

2 réponses

Réponse 1 / 2
lamouche
 
Bonjour,

Bon personne n'a eu une ptite idée?

Sinon j'ai remarqué qu'en ajoutant une alert('quelque chose') a la fin de mon onsubmit (ligne 24), le script semble s'excécuter correctement, la barre de progression ce lance, et j'ai bien mon alert(upload terminé!). Par contre, pas possible de cliquer sur l'alert tant que l'upload n'est pas fini.

Bon je vous avoue que je comprend pas ce qui ce passe, donc si vous avez une idée merci à vous
0
Réponse 2 / 2
lamouche
 
please help!
0