Question

Is there any way to be able to detect with jQuery, when a file is uploaded to an input element like below:

<input type='file' name='filex' id='filex' style="height: 2.3em" size="23" />

I’m looking for an event specific to when the file is placed (uploaded) to the element, not when the element is clicked before the open file dialog is opened. I’m aware that I can submit the form and then get the file server side, but I want to display a thumbnail to the user before the form is submitted on confirm.

Thanks.

Answer 1

As a file input will start off with no files selected, and no files can be selected without user-interaction, I’d suggest using the change() method (using the change event):

$('input:file').change(
    function(e){
        console.log('file "' + path.split('\\').pop(); + '" selected.');
    });

References:

• :file selector.
• Use jQuery to get the file input's selected filename without the path