Identifier <div>
Fermé
delaville81
Messages postés
151
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
25 octobre 2022
-
Modifié le 17 janv. 2020 à 16:00
delaville81 Messages postés 151 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 25 octobre 2022 - 23 janv. 2020 à 17:19
delaville81 Messages postés 151 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 25 octobre 2022 - 23 janv. 2020 à 17:19
A voir également:
- Identifier <div>
- Identifier appareil avec adresse mac - Guide
- Identifier un numéro de gsm belgique ✓ - Forum Mobile
- Div c++ - Télécharger - Langages
- Identifier adresse ip - Guide
- Div scrollable ✓ - Forum HTML
5 réponses
de1irium
Messages postés
9
Date d'inscription
dimanche 19 janvier 2020
Statut
Membre
Dernière intervention
18 février 2020
2
19 janv. 2020 à 09:07
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 :
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.
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
17 janv. 2020 à 16:07
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.
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.
delaville81
Messages postés
151
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
25 octobre 2022
Modifié le 19 janv. 2020 à 09:53
Modifié le 19 janv. 2020 à 09:53
Mon code HTML PHP
Pour le coup de JS loadFileCom(event) je en sais pas vraiment comment faire
Merci
Bien PHPment et MySQLment
Delaville
<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
Bien PHPment et MySQLment
Delaville
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
19 janv. 2020 à 09:57
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
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>
delaville81
Messages postés
151
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
25 octobre 2022
20 janv. 2020 à 20:11
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.
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.
de1irium
Messages postés
9
Date d'inscription
dimanche 19 janvier 2020
Statut
Membre
Dernière intervention
18 février 2020
2
20 janv. 2020 à 21:41
20 janv. 2020 à 21:41
tu peux cacher un élément avec style.display = 'none' :
event.target.nextElementSibling.children[0].style.display = 'none';
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
delaville81
Messages postés
151
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
25 octobre 2022
23 janv. 2020 à 17:19
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
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