Input file qui s'ouvre 5 fois

Résolu

delaville81 Messages postés 195 Date d'inscription Statut Membre Dernière intervention -
delaville81 Messages postés 195 Date d'inscription Statut Membre Dernière intervention - 12 déc. 2019 à 11:52

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

Afficher la suite

A voir également:

Input file qui s'ouvre 5 fois
.Bin file - Guide
Host file - Guide
.Dat file - Guide
File renamer - Télécharger - Gestion de fichiers
File shredder - Télécharger - Nettoyage

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Réponse 2 / 5

delaville81 Messages postés 195 Date d'inscription Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > jordane45 Messages postés 38486 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');
});

Réponse 3 / 5

delaville81 Messages postés 195 Date d'inscription Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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... )

Réponse 4 / 5

delaville81 Messages postés 195 Date d'inscription Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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>

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

delaville81 Messages postés 195 Date d'inscription Statut Membre Dernière intervention

nickel, ça marche.
Merci encore

Discussions similaires

Voxbone ? qui est-ce ?

input signal out of range

comment désactiver out of range

Votre réponse

Discussions similaires