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

    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
      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
      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');
        });
        
        
    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
      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... )
    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');
      });
      

      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>