Detecting file selection jQuery

Question

I have been using the obvious:

    /*Place the file into the editing image */
    $j("#file").change(function(e) {
            type="upload";
            submitChanges("preview");
    });

The submitChanges function basically submits the form by "clicking" submit (which is hidden). The form is monitored with the AJAX forms plugin. The submission is working fine and is irrelevant to the issue, but is here just to give you a background.

With Firefox and IE8 everything works fine. If the user selects a file AJAX does it's thing. The user can click browse again and select either a new file or the same file and the change will fire again.

The issue is with Webkit based browsers (Chrome and Safari) the change event is only fired if the user selects a different file than what was selected previously. These browsers interpret change literately. Since the box did not change due to the fact that the same file was selected the event is not firing. I would like to mimic the functionality of IE and Firefox in that this event is fired no matter what file is selected.

Any solutions?

HTML as requested:

 <table border="0" style="width:100%">
                    <tbody>
                            <tr>
                                    <td style="width:50%"><input id="preview" type="button" value="Preview"/></td>
                                    <td><input type="button" id="save" value="Save" /></td>
                            </tr>
                            <tr>
                                    <td style="width:50%">Upload (JPEG Only):</td>
                                    <td><form id="uploadForm" class="upload" method="POST" enctype="multipart/form-data" action="/path/to/file.php?action=preview"><input type="file" name="file" id="file" /><input type="submit" id="uploadSubmit" style="display:none" /><div id="hiddenFields"><!-- JQUERY --></div></form></td>
                            </tr>
                    </tbody>
            </table>

No I did not. Click would not make sense as the file is not selected when the button is clicked. — user974896, Oct 10 '12 at 19:42
Per your request the HTML is up. The hiddenFields div is populated with in the submitChanges function prior to $("#uploadSubmit").click() is called. — user974896, Oct 10 '12 at 19:51
possible duplicate of http://stackoverflow.com/questions/12030686/html-input-file-selection-event — greener, Oct 10 '12 at 19:52

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

i know this is a bit of a hack, but could be a temporary solution.

to trigger the change event even if the user selects the same file, clean the field after you have done everything you wanted.

$("#file").on('change', function(e) {
    type = "upload"
    submitChanges("preview")
    $(this).val('')
})

see it working here: http://jsfiddle.net/RASG/2rrqv/

tested with Chrome 21 and FF 15.

For IE, there is another "hack" here: Why doesn't IE reset file input field?

edited May 23 '17 at 11:43

Community

1
1

answered Oct 11 '12 at 13:19

RASG

5,988
4
26
47

Have an upvote. It works in Firefox, Chrome, and Safari. It does not work in IE. Having it work in 3/4 of browsers is better than working in 1/4 of browsers. – user974896 Oct 12 '12 at 13:33

Detecting file selection jQuery

1 Answers1