Masquer un élément si pas de photo dans un input

Résolu/Fermé

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 - 12 août 2016 à 18:05
barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 - 13 août 2016 à 18:15

Bonjour,

Je souhaite masquer ma div qui affiche la miniature de mon image si aucune image n'est sélectionnée et l'afficher lorsqu'il y en a une. En php je ferais:

if(isset($_FILES['fichier']) && $_FILES['fichier']['error'] == 0){

donc là, j'afficherais ma div mais comment faire en javascript. Sans doute quelque chose comme:

document.getElementById('madiv').style.display ="none";

si pas d'image mais, comment savoir si aucune image est sélectionnée?

Je vous remercie de votre aide.

A voir également:

Masquer un élément si pas de photo dans un input
Photo aérienne de ma maison - Guide
Partage photo - Guide
Photo de profil - Guide
Traduction photo gratuit - Guide
Télécharger toutes les photos de google photo - Guide

2 réponses

Réponse 1 / 2

Grandasse_ Messages postés 924 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 27 avril 2023 594
12 août 2016 à 18:28

Bonjour,
C'est un peu curieux. On peut voir un peu plus de ton code ?

Réponse 2 / 2

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 110
Modifié par barale61 le 12/08/2016 à 18:37

Voici mon html

<!--DEBUT POUR AJOUTER UNE PHOTO-->
      <div class="row">
        <div id="ajout_photo" class="file-field input-field col s12 m12 l12">
               <span>Photo</span>
                    <center>
                        <span class="valign">
                            <i class="medium i_photo material-icons waves-effect waves-light">add_a_photo
                            <input type="file" name="fichier" id="fichier">
                            </i>
                        </span>
                    </center>
        </div> 
      </div> 
    <!--FIN POUR AJOUTER UNE PHOTO-->
    <!-- DEBUT APERCU DE LA MINIATURE --> 
      <div class="row">
            <div id="image_preview" class="col s12 m6 l8">
                <div class="thumbnail hidden"> <!--Pour la class thumbnail dans ajoutClient.func.js et hidden -->
                    <img src="" alt="" class="taille_miniature">
                    <p class="nom_photo"></p>
                    <p class="poids"></p>
                    <button class="btn btn-block blue" type="button">Annuler cette photo</button>
                </div>
            </div>
      </div>
      <!-- FIN APERCU DE LA MINIATURE -->

Et je souhaiterais que la div "image_preview" n'apparaisse pas si il n'y a aucun fichier sélectionné.

Grandasse_ Messages postés 924 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 27 avril 2023 594
13 août 2016 à 01:29

Du coup je verrai un truc du genre (modif ligne 20):

<!--DEBUT POUR AJOUTER UNE PHOTO-->
      <div class="row">
        <div id="ajout_photo" class="file-field input-field col s12 m12 l12">
               <span>Photo</span>
                    <center>
                        <span class="valign">
                            <i class="medium i_photo material-icons waves-effect waves-light">add_a_photo
                            <input type="file" name="fichier" id="fichier">
                            </i>
                        </span>
                    </center>
        </div> 
      </div> 
    <!--FIN POUR AJOUTER UNE PHOTO-->
    <!-- DEBUT APERCU DE LA MINIATURE --> 
      <div class="row">
if (isset($_files['fichier']) {
            <div id="image_preview" class="col s12 m6 l8">
                <div class="thumbnail hidden"> <!--Pour la class thumbnail dans ajoutClient.func.js et hidden -->
                    <img src="" alt="" class="taille_miniature">
                    <p class="nom_photo"></p>
                    <p class="poids"></p>
                    <button class="btn btn-block blue" type="button">Annuler cette photo</button>
                </div>
            </div>
}
      </div>
      <!-- FIN APERCU DE LA MINIATURE -->

Si je puis me permettre une petite remarque, la balise <center> est obsolète et dépréciée.

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 110 > Grandasse_ Messages postés 924 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 27 avril 2023
13 août 2016 à 12:34

De cette façon, cela ne marche pas mais je pense qu'il faudrait réactualiser la page en js alors j'essai en js de cette façon, mais il me dit que fichier n'est pas défini (ReferenceError: getElementById is not defined à cette ligne: if (getElementById('fichier').value != null) {)
Alors que l'id fichier est bien là.

        
<script>
            if (getElementById('fichier').value != null) {
                document.getElementById('image_preview').style.display = "block";
                document.getElementById('image_preview').style.zIndex = "10";
            } 
</script>

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 110
13 août 2016 à 18:15

J'ai utilisé jquery:

            
               $(document).ready(function(){
                $("input").change(function(){
                document.getElementById('image_preview').style.display = "block";
                document.getElementById('image_preview').style.zIndex = "10";
                });
            });

Discussions similaires

input signal out of range

aidez-moi à m'amuser sur mon P.C!

Connaitre la date d'une photo.