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

Version imprimable

12/08/2016, 18h01
barale61

Masquer un élément si pas de photo dans un input
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:
Code:

1 2 if(isset($_FILES['fichier']) && $_FILES['fichier']['error'] == 0){
donc là, j'afficherais ma div mais comment faire en javascript. Sans doute quelque chose comme:
Code:

1 2 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.

Masquer un élément si pas de photo

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à.
Code:

1 2 3 4 5 6 7 <script> if (getElementById('fichier').value != null) { document.getElementById('image_preview').style.display = "block"; document.getElementById('image_preview').style.zIndex = "10"; } </script>

13/08/2016, 15h08
MehrezLabidi

du coté html, tu es sur que tu as un input avec

Code:

<input class='file' type="file" id="fichier" ..

?!
il faut penser au cas de reset qui va être compliquée.
je crois que avec jquery (onchange ..) ca peut être plus simple

Masquer un élément si pas de photo

Voici mon html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
     <!--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-->

Masquer un élément si pas de photo

J'ai utilisé jquery:

Code:

1
2
3
4
5
6
7
 
                $(document).ready(function(){
                $("input").change(function(){
                document.getElementById('image_preview').style.display = "block";
                document.getElementById('image_preview').style.zIndex = "10";
                });
            });