Upload de fichier avec barre de progression

Fermé

lamouche - 31 juil. 2014 à 21:05
lamouche - 1 août 2014 à 15:57

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:

Upload de fichier avec barre de progression
Fichier rar - Guide
Fichier host - Guide
Fichier iso - Guide
Comment réduire la taille d'un fichier - Guide
Ouvrir fichier .bin - Guide

2 réponses

Réponse 1 / 2

lamouche
1 août 2014 à 12:40

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

Réponse 2 / 2

lamouche
1 août 2014 à 15:57

please help!

Discussions similaires

comment donner les droits sur fichier partage

Chemin Logo du site de la Cité de l'espace

Barre verticale droite sur clavier

Discussions similaires

Newsletters