IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Input multiples fichiers avec affichage


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2016
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2016
    Messages : 4
    Points : 3
    Points
    3
    Par défaut Input multiples fichiers avec affichage
    Bonjour,

    Voila, malgré mes recherches sur le forum avec de nombreux sujets qui y répondent, je n'arrive pas a créer mon code perso...

    Je cherche a afficher lorsque on clique sur Parcourir, et qu'on sectionne les fichier, le nom de tous les fichiers sélectionnes.

    Voici mon ébauche de départ:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <li style="height:auto;">
                <label for=picture style="width: 300px;">Ajouter (JPG, JPEG ou PNG | max. 5 Mo )</label>
                <div id='phrase'></div>
                <input type='file' name='fichier[]' multiple="multiple" id='fichier' style='display:none' onchange='document.getElementById('phrase').innerHTML = "Vous avez choisi : "+this.Value;'><br/>
                <input name="" type='button' onclick='document.getElementById("fichier").click();' value='Parcourir...'>
                <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
                <div style="clear:both"></div> 
              </li>
    Ce code marche tres bien pour 1 fichier mais pas pour plusieurs alors j'ai tenté du JAVA avec :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <li style="height:auto;">
                <label for=picture style="width: 300px;">Ajouter (JPG, JPEG ou PNG | max. 5 Mo )</label>
                <div id='phrase'></div>
                <input type='file' name='fichier[]' multiple="multiple" id='fichier' style='display:none' ><br/>
                <input name="" type='button' onclick='document.getElementById("fichier").click();' value='Parcourir...'>
                <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
                <div style="clear:both"></div> 
              </li>
    Et un bout de code Script:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    document.getElementById('fichier').onchange=function(){
        // On récupère la liste des fichiers
        var listeFichiers = document.getElementById('fichier').files;
        for ( var i = 0; i < listeFichiers.length; i ++ )
        {
            var unFichier = listeFichiers[i];
            var message = unFichier.name;
            document.getElementById('phrase').innerHTML = "Vous avez choisi : "+message;
        }
    });
    Sauf que bah... c'est pas tres concluant.. Rien ne s'affiche :/

    Ca dois etre vraiment un pb de Me*** mais trop pas doué de le voir :/

    J’espère que vous pourrez m'aider !!

    Merci

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    197
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 197
    Points : 300
    Points
    300
    Par défaut
    Je ne sais pas si le problème se résume à ça mais déjà, tu as un espace en trop dans ta boucle :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    for ( var i = 0; i < listeFichiers.length; i ++ )
    à remplacer par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    for ( var i = 0; i < listeFichiers.length; i++ )

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2016
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2016
    Messages : 4
    Points : 3
    Points
    3
    Par défaut
    J'ai supprimé ce petit espace mais non, il se trouve que le problème n'est pas résolu :/
    Je n'arrive pas a même comprendre pourquoi est-ce que rien ne s'affiche alors que le code a l'air bon. Il devrai au moins y avoir en toute logique le nom d'un fichier mais la rien :/ Et dans ma page en dev rien ne s'ajoute ou s'enlève :/

  4. #4
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2016
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2016
    Messages : 4
    Points : 3
    Points
    3
    Par défaut
    En revanche si je renomme mon script en tant que fonction, et que je met dans mon champ de fichier : onchange='maFonction()' je peut voir écrit le nom d'un seul fichier

  5. #5
    Membre actif
    Profil pro
    Développeur .NET
    Inscrit en
    Novembre 2010
    Messages
    127
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2010
    Messages : 127
    Points : 288
    Points
    288
    Par défaut
    Tu peux faire ça :
    Pour ton html, catcher l'évènement change :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <input type='file' name='fichier[]' multiple="multiple" id='fichier' style='display:none' onchange="displayFileNames()">
    Et pour ton js :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    function displayFileNames () {
                // On récupère la liste des fichiers
                var listeFichiers = document.getElementById('fichier').files;
                for (var i = 0; i < listeFichiers.length; i++) {
                    var phrase = document.getElementById('phrase')
                    if(i==0)
                        phrase.innerHTML = phrase.innerHTML + "Vous avez choisi : "
                    var unFichier = listeFichiers[i];
                    var message = unFichier.name;
                    phrase.innerHTML = phrase.innerHTML + "  " + (i + 1) + " : " + message;
                }
            };

  6. #6
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2016
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2016
    Messages : 4
    Points : 3
    Points
    3
    Par défaut
    Super tout fonctionne !!
    Merci bcp

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. protection de fichiers avec affichage d'images
    Par grinder59 dans le forum Apache
    Réponses: 5
    Dernier message: 30/09/2013, 22h01
  2. Comment télécharger un fichier avec affichage du chargement?
    Par lunix546 dans le forum Windows Mobile
    Réponses: 12
    Dernier message: 23/01/2010, 21h54
  3. [Upload] upload fichiers avec multiple submit
    Par dolf13 dans le forum Langage
    Réponses: 17
    Dernier message: 06/06/2006, 01h20
  4. Connaitre type d'un fichier (<input type="file"..>) avec javascript
    Par goldorax113 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 18/04/2006, 09h00
  5. Problème lors de la lecture d'un fichier avec Input...
    Par Kronoob dans le forum VB 6 et antérieur
    Réponses: 13
    Dernier message: 18/11/2005, 18h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo