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 :

evenement de file upload


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Inscrit en
    Novembre 2006
    Messages
    50
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 50
    Points : 38
    Points
    38
    Par défaut evenement de file upload
    Bonjour a tous,

    Je cherche actuellement a permettre a l'utilisateur de mon application Web d'uploader autant de fichiers qu'il veut depuis une unique page.

    La partie upload en elle-meme marche bien, mais je souhaiterais proceder ainsi pour gerer la selection de multiples fichiers : j'ai un premier champ de selection de fichier et j'aimerais que quand l'utilisateur a choisi un fichier, mon JavaScript fasse apparaitre un second champ, qui quand il sera lui-meme rempli fera apparaitre un troisieme champ et ainsi de suite.

    Pour le moment ca marche, sauf que je n'arrive pas a determiner le nom de l'evenement a capturer indiquant qu'un fichier a ete choisi.

    J'ai essaye avec onchange, mais cela fait disparaitre le nom du fichier. Avec onselect, mais ce n'est pas ce que je veux.

    Y a-t-il une solution simple ? Y a-t-il une solution tout court ?

    Merci d'avance !

    AlienQueen

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    un truc de ce style là ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Upload files</title>
    <script type='text/javascript'>
    var increment=0;
     
    function addfile(){
    increment++;
    var newDiv=document.createElement('div');
    newDiv.id="div_"+increment;
    var newInput = document.createElement('input');
    newInput.type='file';
    newInput.name="fichier[]";
    newInput.id="fich_"+increment;
    var newButton=document.createElement('input');
    newButton.type="button";
    newButton.id="_"+increment;
    newButton.onclick=function(){destroy(this.id);};
    newButton.value="supprimer"
     
    newDiv.appendChild(newInput);
    newDiv.appendChild(document.createTextNode(' '));
    newDiv.appendChild(newButton);
     
     
    document.getElementById('listefichiers').appendChild(newDiv);
    }
     
    function destroy(obj){
    document.getElementById('listefichiers').removeChild(document.getElementById('div'+obj));
    }
    </script>
    </head>
     
    <body>
    <form action="" />
    <fieldset id="listefichiers" >
    <legend>liste des fichiers</legend>
    <input type="file" name="fichier[]" id='fich0' /><br />
    </fieldset>
    <input type='button' onclick='addfile()' value="ajouter un fichier" />
    </form>
    </form>
    </body>
     
    </html>

  3. #3
    Nouveau membre du Club
    Inscrit en
    Novembre 2006
    Messages
    50
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 50
    Points : 38
    Points
    38
    Par défaut
    Et bien ton code m'a fait realiser que l'evenement onchange() ne fait pas disparaitre le contenu ! En fait, c'est ma facon de creer un nouveau champ d'upload qui etait mauvaise : j'essayais de rajouter un champ en faisant un truc du stye :

    champ.innerHTML = champ.innerHTML + nouveauChamp

    ce qui ne copiait pas le contenu de l'ancien champ. Mais comme il etait reaffiche tout de meme, ca me donnait l'impression que c'etait l'evenement qui le faisait disparaitre. J'ai donc procede en creant comme toi un champ vierge et en l'ajoutant a la page a coup de appendChild.

    J'ai essaye d'ecrire le code moi-meme, meme si tu m'as evidemment inspire. Je te remercie donc bien !

    Je mets mon code ici, a toutes fins utiles :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
     
     
    <script type="text/javascript">
    var index = 0;
     
    function add() {
     
    document.getElementById("attachement"+index).onchange="";
    index++;
    var component = document.createElement("div");
    component.id = 'divUpload'+index;
    component.innerHTML = "Attached file "+(index+1)+" :<br/>"+" <input type='file' name='attachement"+index+"' id='attachement"+index+"'size='50'  onchange='add()'/>"+"<br/><br/>";
     
    document.getElementById("upload").appendChild(component);
     
    }
    </script>
     
     
     
     
    <form action="foo" method="post"  enctype="multipart/form-data">
     
    <div id="upload">		
    <div id="divUpload0">
    Attached file 1 :<br/>
    <input type="file" name="attachement0" id="attachement0" size="50" onchange="add()"/>
    <br/><br/>
    </div>		
    <br/><br/>
    <input type="submit"/>
     
    </form>
    Je n'ai pas mis de bouton pour supprimer un fichier, parce que ma webapp est intelligente : si un champ est vide ou s'il contient un nom invalide, il est tout simplement ignore.

    Merci encore !

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

Discussions similaires

  1. [Upload] file Upload: mettre un fichier sur le serveur
    Par eseb777 dans le forum Langage
    Réponses: 4
    Dernier message: 07/03/2007, 10h01
  2. [Upload] file upload preload
    Par taffMan dans le forum Langage
    Réponses: 3
    Dernier message: 17/12/2006, 21h13
  3. [Struts][file upload] Exception Bizarre
    Par pmartin8 dans le forum Struts 1
    Réponses: 1
    Dernier message: 23/05/2006, 17h55
  4. [STRUTS][HTPPS]File upload
    Par jiraiya dans le forum Struts 1
    Réponses: 2
    Dernier message: 18/05/2006, 14h54
  5. [com applet-servlet][file upload] CharConversionException
    Par meufeu dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 10/08/2004, 12h03

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