Input file qui s'ouvre 5 fois

Résolu
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. Modérateur
    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
    1. 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. Modérateur

        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
      2. Modérateur
        @jordane45Imaginons 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
    2. 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. Modérateur
        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
    3. 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. Modérateur
        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
    4. nickel, ça marche.
      Merci encore

      0