Identifier <div>

delaville81 Messages postés 209 Statut Membre -
delaville81 Messages postés 209 Statut Membre - 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

Bien PHPment et MySQLment
Delaville

Afficher la suite

5 réponses

Réponse 1 / 5
Utilisateur anonyme
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 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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

delaville81 Messages postés 209 Statut Membre

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

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

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>

Réponse 4 / 5
delaville81 Messages postés 209 Statut Membre

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
1. Utilisateur anonyme
  
  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 209 Statut Membre
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

Identifier <div>

5 réponses

Discussions similaires

Newsletters