Hide div until file selected

I have an image upload form with the following element:

<input type="file">

I need to hide a div and only show it when a file is selected.

$("#myDiv").hide();

开发者_如何学C

Do I need to add an ID to the form element and do onchange check if it's !empty? Not sure.

---

$('input[type=file]').change(function(){
    $("#myDiv").show();
});

Fiddle: http://jsfiddle.net/maniator/eVSxD/

---

Yes, you should do that. Here's an example:

http://jsfiddle.net/3WSTd/

---

Yes

http://jsfiddle.net/XdsLP/

The selector for the input doesn't matter.

---

You do not need to add an id to the input element but if you are showing a specific div if this particular element is populated, then I'd assign the behavior to an id instead of what @Neal suggested, as his solution will show the div regardless of what input file field was populated.

$('#my_file').change(function(){
    if(this.value != '')
    {
        $('#my_div').fadeIn();
    }
    else
    {
        $('#my_div').fadeOut();
    }
});

Demo: http://jsfiddle.net/AlienWebguy/Gq3Jf/