Identifier <div>
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 -
delaville81 Messages postés 195 Date d'inscription Statut Membre Dernière intervention -
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.
script js qui affiche l'image
Js qui affiche l'image
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
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
A voir également:
- Identifier <div>
- Identifier appareil avec adresse mac - Guide
- Div c++ - Télécharger - Langages
- Identifier un tableau à partir d'une photo - Forum Loisirs / Divertissements
- Call identifier 2.08 - Télécharger - Téléphonie & Visio
- Identifier un objet à partir d'une photo - Guide
5 réponses
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 :
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.
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.
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.
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.
Mon code HTML PHP
Pour le coup de JS loadFileCom(event) je en sais pas vraiment comment faire
Merci
<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
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
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>
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
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
removemais ç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
