Input file qui s'ouvre 5 fois [Résolu]

Signaler
Messages postés
105
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
25 décembre 2019
-
delaville81
Messages postés
105
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
25 décembre 2019
-
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

5 réponses

Messages postés
27249
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2020
2011
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


Messages postés
105
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
25 décembre 2019

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
jordane45
Messages postés
27249
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2020
2011

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
jordane45
Messages postés
27249
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2020
2011 > jordane45
Messages postés
27249
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2020

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

Messages postés
105
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
25 décembre 2019

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
jordane45
Messages postés
27249
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2020
2011
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... )
Messages postés
105
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
25 décembre 2019

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

jordane45
Messages postés
27249
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2020
2011
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>
Messages postés
105
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
25 décembre 2019

nickel, ça marche.
Merci encore

Bien PHPment et MySQLment
Delaville