• logo categorie
    RESOLU

    Tutoriel : Upload de fichiers en javascript


    Hello tout le monde!

    Comme vous vous le demandez sans doute puisque vous êtes tombés sur cette page, je vais vous expliquer dans ce tutoriel comment uploader un document sur votre serveur (images, vidéos et autres) en javascript, c'est à dire, sans aucuns rechargement de pages, ET, le + majeur, le pouce en l'air, la cerise sur le gâteau, avec une barre de progression lors de l'upload!

    La suite dans ma réponse!
    Webmasters - Développement web
    AJAX
    CSS
    Général Conception Web
    HTML / DHTML / XHTML
    JavaScript
    tutoriel
    upload
    javascript
    barre de progression
    images
    utilisateur
    Dr. Dino
    Posté le : 27 Août à 14:35
    70 443 vues

  • 42
    Dr. Dino
    Posté le : 27 Août à 14:57
    La réponse tient en un seul mot : l'objet XHR ou XMLHttpRequest.
    Bien sûr tout le monde à déjà fait un scipt d'upload d'image en HTML et PHP. Pour ça, rien de plus simple :
    <form method="post" action="reception.php" enctype="multipart/form-data">
         <input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
         <input type="file" name="mon_fichier" id="mon_fichier" /><br />
         <input type="submit" name="submit" value="Envoyer" />
    </form>

    Bim, on clique et c'est au PHP de jouer via reception.php.
    Ici ce que l'on veut c'est appeller le fichier reception.php, uploader son document et avoir une barre de progression lors de l'upload, le tout sans quitter la page index.html qui nous plait tant.

    Alors on aura besoin d'un fichier index.html et de son fichier style.css, d'un fichier upload.js, et d'un hypothétique fichier de réception du fichier en php, ici notre reception.php.

    Le but est de créer un formulaire en HTML et une barre de progression en html:
    <input type="file" id="file"/>
    <div class="bar"><div class="progress"></div></div>

    TCHACK!
    On y associe notre fichier js :
    <script type="text/javascript" src="upload.js"></script>

    Et notre fichier css :
    <link type="text/css" href="style.css" rel="stylesheet" />

    Ce qui donne :
    index.html
    <link type="text/css" href="style.css" rel="stylesheet" />
    <input type="file" id="file"/>
    <div class="bar"><div class="progress"></div></div>
    <script type="text/javascript" src="upload.js"></script>


    Passons au plus intéressant, notre fichier js en deux parties, une pour la barre de progression, et l'autre pour l'upload avec XHR :

    J'utilise JQuery, mais la même chose est possible sans.

    upload.js - barre de progression :
    function initBar() {
    $(".bar").show();
    setProgressBar(0);
    }
    function setProgressBar(percent) {
    $(".bar .progress").css("width", percent + "%");
    $(".bar .progress").data("value", percent);
    }
    function endBar() {
    $(".bar").hide();
    }

    Un petit bout d'explication : on à un div qui fait une partie de la taille de l'écran (.bar) et un div à l'intérieur de ce div qui fait une partie de ce div (.progress). Quand on augmente la taille de ce div (.progress) puisqu'il est collé du coté gauche de .bar, cela simule une progression linéaire.

    upload.js - upload de fichier :
    function upload(file) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'reception.php');
        initBar();
        xhr.upload.onprogress = function(e) {
        	var loaded = e.loaded / e.total * 100;
        	setProgressBar(loaded);
        };
        xhr.onload = function(e) {   
            endBar();
        };  
        var form = new FormData();
        form.append('file', file);
        xhr.send(form);
    }
    var fileInput = document.querySelector('#file');
    fileInput.onchange = function() {
        upload(fileInput.files[0]);
    };

    Un petit bout d'explication : quand #file est changé (fileInput.onchange), ou plus simplement, quand un fichier est choisi par l'utilisateur, on appelle la fonction upload de ce fichier. On crée un objet XHR, on lui assigne la cible du formulaire d'upload (reception.php), puis on initialise la barre de progression. La fonction onprogress est appelée à intervalles réguliers lors de l'upload, et la fonction onload est appelée à la fin de l'upload, on envoie le formulaire (xhr.send(form) ) et hop, un fichier uploadé!

    Notre fichier css :
    style.css
    .bar {
        display: none;
        background-color: #575757;
        height: 5px;
        left: 50%;
        margin-left: -300px;
        margin-top: 40px;
        position: absolute;
        top: 50%;
        width: 600px;
        z-index: 20;
    }
    
    .bar .progress {
        width: 0%;
        height: 100%;
        background-color: #E02222;
    }


    Et hop le tour est joué!
    Merci Dr. Dino!

  • 6
    Saurus
    Posté le : 27 Août à 16:28
    Merci pour vos lumières Dr.Dino !
  • 0
    MARJAN
    Posté le : 9 Mars à 10:53
    Bonjour,
    Je recherche désespérément le moyen de faire une barre de progression pour un upload de fichier.
    Je n'arrive pas à trouver sur le net des explications complètes et bien documentées en français.
    Je ne maitrise pas du tout le javascript, mais ça va en PHP.
    Lorsque j'ai trouvé votre tuto, de plus en français, je croyais avoir trouvé le graal.
    Je dois être un peu obtus, mais je n'arrive pas à faire fonctionner votre exemple. Tout marche bien, sauf que la barre de progression ne s'affiche pas !.....
    si dans le fichier css j'enlève display:none , je vois bien la barre. Par contre, pas la progression .
    Pouvez-vous m'aider ?
    D'avance merci.
  • ⇒ Si vous êtes ici c'est que le sujet vous intéresse ^^
    Inscrivez-vous sur Oyant, apportez votre contribution sur ce sujet et gagnez de l'argent :

    Inscription
    Répondre
  • logo categorie
    RESOLU

    La différence entre Siren et Siret

    Salut
    La différence entre Siren et Siret?
    Entreprise
    Siren
    Siret
  • logo categorie
    RESOLU

    La différence entre eori et immatriculation TVA

    Bonjour
    La différence entre eori et immatriculation TVA?
    Merci d'avance.
    Entreprise
    Eori
    Immatriculation
  • logo categorie
    RESOLU

    La différence entre impôt et taxe

    Salut
    J'ai besoin de la différence entre impôt et taxe?
    Entreprise
    Impôt
    Taxe
  • logo categorie
    RESOLU

    La différence entre consultant et conseiller

    Bonjour
    Quelle est la différence entre consultant et conseiller?
    Vie pratique
    Consultant
    Conseiller
  • logo categorie
    RESOLU

    La différence entre clôture et palissade

    Bonjour
    Quelle est la différence entre clôture et palissade?
    Langues
    Clôture
    Palissade
  • logo categorie
    RESOLU

    La différence entre honnête et intègre

    Bonjour
    La différence entre honnête et intègre?
    Langues
    Honnête
    Intègre
  • logo categorie
    RESOLU

    La différence entre langue et langage

    Bonjour
    J'arrive pas à faire la différence entre langue et langage?
    Langues
    Langue
    Langage
  • logo categorie
    RESOLU

    Différence entre analphabète et illettré

    Bonjour
    S'il vous plaît, y a-t-il une différence entre analphabète et illettré?
    Enseignement
    Illettré
    Analphabète
  • logo categorie
    RESOLU

    La différence entre transport et logistique

    Salut
    La différence entre transport et logistique, s'il vous plait?
    Entreprise
    Transport
    Logistique
  • logo categorie
    RESOLU

    Hôtel et auberge

    Bonjour
    Je veux savoir si un hôtel est mieux qu'une auberge?
    Vie pratique
    Hôtel
    Auberge
  • logo categorie

    Haut-de-forme au pluriel ?!

    Bonjour!

    Pourriez-vous me dire comment écrire haut-de-forme au pluriel s'il vous plaît ?!
    Merci
    Culture
    Langues
    Langue française
    haut-de-forme
    pluriel
  • logo categorie
    RESOLU

    Comment vérifier qu'une valeur est bien dans mon tableau ?

    Bonjour,

    J'aimerais vérifier que ma variable est bien dans mon tableau, quelle fonction dois-je utiliser ?
    PHP
    PHP
    Fonction
  • logo categorie

    "à bicyclette" ou "en bicyclette" ?!

    Bonjour, bonjour!

    Aidez-moi s'il vous plaît: dit-on à bicyclette ou en bicyclette ?!
    Merci d'avance!
    Culture
    Langues
    Culture générale
    Langue française
    syntaxe
    à bicyclette
    en bicyclette
  • logo categorie
    RESOLU

    Dit-on la maison de Paul ou la maison à Paul ?!

    Salut !

    Petite question de syntaxe pour vous les amis : dit-on la maison DE Paul ou la maison A Paul ?!
    Merci d'avance
    Langues
    Langue française
    syntaxe
  • logo categorie
    RESOLU

    E-relation client instantanée

    Bonjour,
    Pouvez-vous me conseiller un service de e-relation client instantanée ?


    Merci
    Entreprise
    Logiciels
    Webmasters - Développement web
    e-relation
    chat
    Click to Chat
    Click to Call
  • logo categorie

    Supprimer Powerbot

    Bonjour

    Comment supprimer Powerbot de mon compte Google ?

    MErci d'avance
    Logiciels
    Autres Logiciels
    powerbot
  • logo categorie
    RESOLU

    "Regret" et "remords"

    Bonjour
    La différence entre regret et remords?
    Langues
    Regret
    Remords
  • logo categorie
    RESOLU

    La différence entre obsolète et vieux

    Bonjour
    La différence entre obsolète et vieux?
    Langues
    Obsolète
    Vieux
  • logo categorie
    RESOLU

    "Persuader" et "convaincre"

    Bonjour
    Est-ce que persuader et convaincre ont le même sens?
    Langues
    Convaincre
    Persuader
  • logo categorie

    Similaire dans une requete mysql

    Bonjour,
    Je cherche autre chose que like pour avoir des résultats similaires et pas like %Expression%


    Merci
    Bases de données
    MySQL
    PHP & SGBD
    similaire
    like
  • Veuillez vous connecter pour profiter pleinement de toutes les fonctionnalités de Oyant.
    Connexion
    Inscription

    Poster une question

    AnimauxApplicationsArnaquesAutres langagesBases de donnéesBeauté et ModeC et C++Cartes de voeux, lettres, poèmes et discoursCMS (Système de gestion de contenu)CollectionCuisineCultureDémarches administrativesDivertissementDotnetDroitEmploiEmploi et études en informatiqueEnseignementEntrepriseEnvironnementEvénementsFinanceGénéral développementImmobilier, logement et urbanisme    JavaLanguesLogicielsMétiersNouvelles technologiesPHPPrestations socialesRéservé aux adultesSantéSportSystèmesTransportsVie pratiqueWebmasters - Développement web 3.105 Utlisateurs parcourent Oyant en ce moment