How to add class when adding file

1

I want to add an ok icon when the person adds a photo to the form, to show her that the photo was added, the problem is that I have an image that I must follow and then the file name does not appear, I want to facilitate the user to know that the photo was successfully added and he can submit the form.

<p>Selecione sua FOTO</p>
   <label for="photo">
   <input type="file" name="photo" id="photo" style="filter:alpha(opacity=0); -moz-opacity:0; opacity:0;">
   <p class="icon-ok" id="iconeOk"></p>


<script>
$(function(){
if($("input:file")!=null){
        $('.icone-ok').addClass();
    }
});
</script>
    
asked by anonymous 24.07.2014 / 15:28

1 answer

1

The problem with your code is that it does not add any class to p , it only runs once when loading the page.

You need to observe the element change. Your Javascript should look something like this:

$("input:file").on('change', function() {
  $("#iconeOk").addClass("icon-ok")
})

JSBin

    
24.07.2014 / 15:39