Sujet Précédent Sujet Suivant

Identifier <div>

Fermé
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024 - Modifié le 17 janv. 2020 à 16:00
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024 - 23 janv. 2020 à 17:19
Bonjour,
Je suis en train de créer un blog.
Pour chaque commentaires, je propose aux utilisateurs de mettre une image que j'affiche une miniature (en js) dans une div
Mes commentaires étant dans une boucle je n'arrive pas à afficher le chargement de l'image dans la bonne div. Il prend toujours la première. 

<input type="file" class="imgCom" name="img[]" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFileCom(event)"> 
<div class="img_com">
        <img src="" id="outputCom" class="img-fluid img-min" alt="">
         <!-- script js qui affiche l'image -->
 </div>


script js qui affiche l'image 
  var loadFileCom = function(event) {
             var outputCom = document.getElementById('outputCom');
             outputCom.src = URL.createObjectURL(event.target.files[0]);
  };


Js qui affiche l'image 
$(".imgCom").click(function(){
  $(".img_com").show();
});


Je precise que je ne suis pas une brute en JS même pas du tout.

Merci de votre aide et de vos lumières

Configuration: Macintosh / Safari 12.1.1


5 réponses

Réponse 1 / 5
Utilisateur anonyme
19 janv. 2020 à 09:07
salut, étant donnée la boucle, tu te retrouves avec plusieurs images avec l'id outputCom.
document.getElementById('outputCom'); récupère toujours le 1er à l'id spécifié.

tout d'abord tu vas mettre la balise <script> à la fin de <body> (juste avant </body>) et ce en tous temps désormais afin que tous les éléments soient chargés avant les scripts (c'est une bonne pratique)

Le problème consiste à récupérer le bon élément img. Vu la structure de ton code, une solution
consiste à naviguer les éléments à partir de l'input qui a déclenché l'événement. Note que ce n'est pas optimal car si tu venais qu'à ajouter/retirer un élément entre l'input et l'image, tu devras en prendre compte dans le code : 
var loadFileCom = function(event) {
		var reader = new FileReader();
		reader.onload = function() {
			event.target // l'élément input
				.nextElementSibling // l'élément div
				.children[0] // le 1er enfant du div, soit l'img
				.src = this.result;
			};
		reader.readAsDataURL(event.target.files[0]);
	};


tu peux spécifier une taille maximale avec max-width sur l'image. ça a l'avantage de ne pas déformer le résultat.
1
Réponse 2 / 5
jordane45 Messages postés 38321 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 1 décembre 2024 4 707
17 janv. 2020 à 16:07
Bonjour,

Sans avoir une vue plus complète de ton code html / js .. il nous sera impossible de t'aider.

Sache toutefois, qu'actuellement tu te bases du l' ID de la balise IMG ... mais un ID ( comprendre IDENTIFIANT ) se doit d'être UNIQUE.

0
Réponse 3 / 5
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
Modifié le 19 janv. 2020 à 09:53
Mon code HTML PHP 

<div class="col-12 col-sm-12 col-md-8">
            <div class="post">
                <?php
                $req = 'SELECT suj.id_sujet, suj.id_user, suj.date, texte_sujet, membre.id_membre, photo, user.id_user, user.id_membre
                FROM sujet suj
                INNER JOIN user ON suj.id_user = user.id_user
                INNER JOIN membre ON user.id_membre = membre.id_membre
                ORDER BY id_sujet DESC LIMIT 0,10';
                $pdo->exec('SET NAMES utf8');
                $res = $pdo->query($req);
                $nb = 0;
                while($suj = $res->fetch()){
                    $nb++;
                    $text = $suj['texte_sujet'];
                ?>
                <div class="card item">
                    <div class="card-header header_subject">
                        <div class="div_flex">
                            <div class="col-1 col-sm-1 col-md-1 img-user">
                                <img src="../admin/photo/<?php echo $suj['photo']; ?>" class="clipClass">
                            </div>
                            <div class="col-md-9 name_user">
                                <span class="text_user"><?php echo membre_prenom_nom($suj['id_membre']);?></span><br />
                                <span class='text_date'><?php echo viewDate($suj['date']);?></span>
                                    
                            </div>
                        </div>
                    </div>
                    <div class="body_padding">
                        <?php 
                        echo "<div class='card_text'>";
                        echo $text;
                        echo "</div>";
                        $req_img_suj = 'SELECT id_sujet, id_user, date, img_sujet FROM img_sujet WHERE id_sujet = '.$suj['id_sujet'].'';
                        $pdo->exec('SET NAMES utf8');
                        $rest = $pdo->query($req_img_suj);
                        while($img = $rest->fetch()){
                            $original = explode('thumb_',$img['img_sujet']);
                            echo "<div>";
                            echo '<a href="blog/'.$original[1].'"><img src="blog/'.$original[1].'" class="img-fluid"></a>'; 
                            echo "</div>";
                        } 
                        ?>
                    </div>
                    <div class="ligne_top"></div>
                    <div>
                        <?php
                            $req_com = 'SELECT id_com, id_sujet, com.id_user, com.date, texte_com, membre.id_membre, photo, user.id_user, user.id_membre, 
                            membre.nom, membre.nom_ep, membre.prenom
                            FROM com
                            INNER JOIN user ON com.id_user = user.id_user
                            INNER JOIN membre ON user.id_membre = membre.id_membre
                            WHERE id_sujet = '.$suj['id_sujet'].'';
                            $pdo->exec('SET NAMES utf8');
                            $resu = $pdo->query($req_com);
                            while($com = $resu->fetch()){
                            ?>
                        <div class="com_show div_flex">
                            <div class="col-1 col-sm-1 col-md-1 img-user">
                                <img src="../admin/photo/<?php echo $com['photo']; ?>" class="clipClass">  
                            </div>
                            <div class="col-md-10 div_coment">
                                <?php if($com['nom_ep'] == ""){$nomEp = "";}else{$nomEp = $com['nom_ep'].' ';} ?>
                                
                                <span class="text_com_name text_user"><?php echo $com['prenom'].' '. $com['nom'].' '.$nomEp; ?></span>
                                <span class="text_com"><?php echo $com['texte_com']; ?></span>
                            </div>
                        </div>
                            <?php } ?>
                    </div>
                    <div>
                        <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" value="<?php echo $suj['id_sujet']; ?>"> 
                                    <input type="text" class="coment" name="texte_com" value="" placeholder="Votre commentaire..."> 
                                    <a class="btn_input"><i class="far fa-image "></i><span class="name">Photos</span></a>
                                    <input type="file" class="imgCom" name="img[]" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFileCom(event)"> 
                                    <div class="img_com">
                                        <img src="" id="outputCom" class="img-fluid img-min" alt="">
                                        <script>
                                            var loadFileCom = function(event) {
                                                var outputCom = document.getElementById('outputCom');
                                                outputCom.src = URL.createObjectURL(event.target.files[0]);
                                            };
                                        </script>
                                    </div>
                                    
                                    <input type="submit" name="publier_com" class="btn btn-primary btn-sm publier_com" value="Publier">
                                </form>     
                            </div>
                        </div>
                    </div>
                </div>
            <div class="ligne_top"></div>
            <?php } ?>
            </div>
        </div>



Pour le coup de JS loadFileCom(event) je en sais pas vraiment comment faire

Merci
0
jordane45 Messages postés 38321 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 1 décembre 2024 4 707
19 janv. 2020 à 09:57
Au plus simple...
Tu mets un ID différents pour chaque Image
(et tu déplaces ton code JS TOUT à la fin de ta page pour n'avoir qu'une seule fonction et pas en créer une à chaque tour de boucle )
un truc du genre 
<div class="col-12 col-sm-12 col-md-8">
            <div class="post">
                <?php
                $req = 'SELECT suj.id_sujet, suj.id_user, suj.date, texte_sujet, membre.id_membre, photo, user.id_user, user.id_membre
                FROM sujet suj
                INNER JOIN user ON suj.id_user = user.id_user
                INNER JOIN membre ON user.id_membre = membre.id_membre
                ORDER BY id_sujet DESC LIMIT 0,10';
                $pdo->exec('SET NAMES utf8');
                $res = $pdo->query($req);
                $nb = 0;
                while($suj = $res->fetch()){
                    $nb++;
                    $text = $suj['texte_sujet'];
                ?>
                <div class="card item">
                    <div class="card-header header_subject">
                        <div class="div_flex">
                            <div class="col-1 col-sm-1 col-md-1 img-user">
                                <img src="../admin/photo/<?php echo $suj['photo']; ?>" class="clipClass">
                            </div>
                            <div class="col-md-9 name_user">
                                <span class="text_user"><?php echo membre_prenom_nom($suj['id_membre']);?></span><br />
                                <span class='text_date'><?php echo viewDate($suj['date']);?></span>
                                    
                            </div>
                        </div>
                    </div>
                    <div class="body_padding">
                        <?php 
                        echo "<div class='card_text'>";
                        echo $text;
                        echo "</div>";
                        $req_img_suj = 'SELECT id_sujet, id_user, date, img_sujet FROM img_sujet WHERE id_sujet = '.$suj['id_sujet'].'';
                        $pdo->exec('SET NAMES utf8');
                        $rest = $pdo->query($req_img_suj);
                        while($img = $rest->fetch()){
                            $original = explode('thumb_',$img['img_sujet']);
                            echo "<div>";
                            echo '<a href="blog/'.$original[1].'"><img src="blog/'.$original[1].'" class="img-fluid"></a>'; 
                            echo "</div>";
                        } 
                        ?>
                    </div>
                    <div class="ligne_top"></div>
                    <div>
                        <?php
                            $req_com = 'SELECT id_com, id_sujet, com.id_user, com.date, texte_com, membre.id_membre, photo, user.id_user, user.id_membre, 
                            membre.nom, membre.nom_ep, membre.prenom
                            FROM com
                            INNER JOIN user ON com.id_user = user.id_user
                            INNER JOIN membre ON user.id_membre = membre.id_membre
                            WHERE id_sujet = '.$suj['id_sujet'].'';
                            $pdo->exec('SET NAMES utf8');
                            $resu = $pdo->query($req_com);
                            while($com = $resu->fetch()){
                            ?>
                        <div class="com_show div_flex">
                            <div class="col-1 col-sm-1 col-md-1 img-user">
                                <img src="../admin/photo/<?php echo $com['photo']; ?>" class="clipClass">  
                            </div>
                            <div class="col-md-10 div_coment">
                                <?php if($com['nom_ep'] == ""){$nomEp = "";}else{$nomEp = $com['nom_ep'].' ';} ?>
                                
                                <span class="text_com_name text_user"><?php echo $com['prenom'].' '. $com['nom'].' '.$nomEp; ?></span>
                                <span class="text_com"><?php echo $com['texte_com']; ?></span>
                            </div>
                        </div>
                            <?php } ?>
                    </div>
                    <div>
                        <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" value="<?php echo $suj['id_sujet']; ?>"> 
                                    <input type="text" class="coment" name="texte_com" value="" placeholder="Votre commentaire..."> 
                                    <a class="btn_input"><i class="far fa-image "></i><span class="name">Photos</span></a>
                                    <input type="file" class="imgCom" name="img[]" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFileCom(event,'<?php echo $suj['id_sujet'];?>')"> 
                                    <div class="img_com">
                                        <img src="" id="outputCom_<?php echo echo $suj['id_sujet'];?>" class="img-fluid img-min" alt="">
                                    </div>
                                    <input type="submit" name="publier_com" class="btn btn-primary btn-sm publier_com" value="Publier">
                                </form>     
                            </div>
                        </div>
                    </div>
                </div>
            <div class="ligne_top"></div>
            <?php } ?>
            </div>
        </div> 
<script>
var loadFileCom = function(event,idImg) {
    var outputCom = document.getElementById('outputCom_'+idImg);
    outputCom.src = URL.createObjectURL(event.target.files[0]);
};
</script>
0
Réponse 4 / 5
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
20 janv. 2020 à 20:11
Merci pour ton aide de1irium.
Ca marche parfaitement (exactement ce que je voulais).
J'ai bien mis le code comme mentionné en fin de page (ce que je fais d'habitude)

Pour t'embêter un peu plus, pourrais tu me dire la bonne méthode JS pour supprimer l'image.

Merci d'avance.
0
Utilisateur anonyme
20 janv. 2020 à 21:41
tu peux cacher un élément avec style.display = 'none' : 
event.target.nextElementSibling.children[0].style.display = 'none';
0

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

Posez votre question
Réponse 5 / 5
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
23 janv. 2020 à 17:19
de1irium , merci de ta réponse.
Je ne cherche pas à cacher l'image mais à la supprimer avec la possibilité si besoin d'en mettre une autre.
J'ai essayé en jQuery le 
remove
mais ça supprime ma balise <img>. 
<div class="img_com">
        <img src="" id="outputCom_<?php echo $suj['id_sujet'];?>" class="img-fluid img-min" alt="">
        <a class="btn_del" onclick="delFileCom(event)"><i class="fas fa-trash-alt del"></i></a>
</div>


J'ai un souci pour le JS (comme je te rappelle je suis pas une brute).
Je sollicite un peu d'aide
Merci d'avance
0

Discussions similaires

Trouver le nom d'un tableau avec sa photo.
lillo56 -
zetnot -

11 réponses
Identification d'un peintre à partir d'une signature
Utilisateur anonyme -
little boy62 -

5 réponses
nom du propriétaire d'un numero de gsm en Belgique
Djhinnie -
Xileh -

1 réponse
trouver numero gsm belgique
aminaalger -
madmyke -

1 réponse
Tableau à identifier
Gabgab_7446 -
Xileh -

2 réponses