Input file qui s'ouvre 5 fois

Résolu
delaville81 Messages postés 209 Statut Membre -  
delaville81 Messages postés 209 Statut Membre -
Bonjour,
Je rencontre un problème avec un input file:


<i class="far fa-image" id="ico_image"></i><span class="name">Photos</span>
<input type="file" name="img_sujet" id="img_sujet" value="" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFile(event)">


Le champ input est en display: none;

coté jQuery

$("#ico_image").click(function () {
$("input[type='file']").trigger('click');
});


Quand je clique sur mon image, il ouvre bien une fenêtre pour choisir un fichier. Que je sélectionne un fichier ou que je clique sur annuler, il m'ouvre la fenêtre 5 fois d'affilé.

Je sollicite votre aide pour résoudre ce problème.

Merci

Configuration: Macintosh / Safari 12.1.1


--
Bien PHPment et MySQLment
Delaville

5 réponses

  1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Bonjour,

    Quel rapport avec le forum PHP ?
    Ta question concerne du JQUERY ... autrement dit .. du Javascript !
    Je déplace donc ta question au bon endroit.

    Concernant ton code, n'as tu pas plusieurs input file sur ta page ?

    Pour commencer, au lieu de cibler tous les input file... je me restreindrait à celui qui nous intéresse
    $("#ico_image").click(function () {
      $("#img_sujet").trigger('click');
    });
    


    Il serait bien également de savoir ce que contient ta fonction déclenchée sur ton onchange
    onchange="loadFile(event)"
    


    PS: A l'avenir, merci d'indiquer le LANGAGE dans les balises de code afin d'avoir la coloration syntaxique et l'indentation du code
    Explications disponibles ici: https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

    0
  2. delaville81 Messages postés 209 Statut Membre
     
    Merci jordane45,

    J'ai bien plusieurs input file:
    1 indépendant
    et plusieurs qui se répètent dans une boucle php.
    Avec ton code ça fonctionne, mais quand j'active l'autre input file dans ma boucle, il s'ouvre 5 fois.
    Comment faire pour les différencier ? (le name et l'id sont different)

    concernant : onchange="loadFile(event)"
    il permet de charger l'image directement
    var loadFile = function(event) {
           var output = document.getElementById('output');
           output.src = URL.createObjectURL(event.target.files[0]);
     };
    


    Merci de ton aide
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       

      Avec ton code ça fonctionne, mais quand j'active l'autre input file dans ma boucle, il s'ouvre 5 fois.
      Comment faire pour les différencier ? (le name et l'id sont different)

      Montre ton code PHP complet
      0
      1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830 > jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention  
         
        Imaginons que ton code PHP génère via sa boucle des élements comme celui ci:
        <i class="far fa-image btn_input" ></i><span class="name">Photos</span>
        <input type="file" name="img[]" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFile(event)"> 
        


        Dans ce cas, via le selecteur Jquery NEXT on peut réaliser un truc du genre
        
        $(".btn_input").click(function(){
          $(this).next("input[type='file']").trigger('click');
        });
        
        
        0
  3. delaville81 Messages postés 209 Statut Membre
     
    Merci de tes conseils.
    J'ai testé ton exemple, mais quand je clique sur mon image <i> avec le js par derrière aucune fenêtre pour sélectionner un fichier ne s'ouvre.

    Merci d'éclairer mes maigres connaissances le JS
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Si tu ne nous montres pas ton code.... difficile de voir ce que tu as mal fait !

      Dans l'idéal, montres nous le code généré (c'est à dire, affiches ta page dans ton navigateur, puis fais un CTRL+U pour voir le code source de la page... )
      0
  4. delaville81 Messages postés 209 Statut Membre
     
    Code de la partie dans la boucle
    <div class="com div_flex div_comment">
            <div class="col-1 col-sm-1 col-md-1 img-user">
                  <img src="<?php echo avatar($_SESSION['id_membre']); ?>" class="clipClass">  
              </div>
               <div class="col-md-10 div_coment">
                       <form action="">
                             <input type="hidden" class="" name="id_sujet" id="id_sujet" value="<?php echo $suj['id_sujet']; ?>"> 
                              <input type="text" class="coment" name="texte_com" id="texte_com" value=""> 
                               <i class="far fa-image btn_input"></i><span class="name">Photos</span>
                               <input type="file" name="img[]" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFile(event)"> 
                       </form>     
                  </div>
      </div>
    


    code jQuery
    $(".btn_input").click(function(){
      $(this).next("input[type='file']").trigger('click');
    });
    

    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Bon... tu n'as pas bien lu ce que je t'ai demandé...
      pas grave

      Voici le code html qu'il te faut utiliser
         <a class="btn_input"><i class="far fa-image "></i><span class="name">Photos</span></a>
      
      0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. delaville81 Messages postés 209 Statut Membre
     
    nickel, ça marche.
    Merci encore

    0