How to set listener for file field - when user selects file, take action

I have fil开发者_运维百科e upload field. When user selects file, a new field is added right underneath, allowing user to select another file, etc.

$("#photos").change(function(){
    var countEmpty = 0;
    $("#photos input").each(function(index) {
        if ( $(this).val() == '' )
            countEmpty++;
    });
    if (countEmpty == 0)
        addNewPhoto();
});

That's the code right now. It listens actually to a change in the div that contains the input fields. When it gets selected, clicked, or whatever, the script checks for empty fields. If no empty fields, it adds a new one.

But this has problem in IE8. In Firefox/Chrome, when user select file, new field appears right away. But in IE, user has to click whitespace, or scroll, or something - before the next field appear.

Any suggestions how to fix for IE?

Thanks.

PS: I have seen uploadifier but wouldn't be able to implement it for my project at this time.

This is to do with IEs implementation of onChange. In IE the input element must loose focus, if the value of that input has changed the onChange will then be fired. (btw look at the HTML 4 definition of onChange, IE actualy does it right where as Firefox... do it wrong http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-onchange)

I would suggest changing your event from onChange to a different event e.g. onClick.