Upload files using input type=“file” field with .change() event not always firing in IE and Chrome [duplicate]

Answer 1

Description

This happens because the value of the input field (the selected filepath) does not change if you select the same file again.

You can set the value in the onChange() event to an empty string and submit your form only if the value is not empty. Have a look at my sample and this jsFiddle Demonstration.

Sample

$(".attachmentsUpload input.file").change(function () {
    if ($(".attachmentsUpload input.file").val() == "") {
        return;
    }
    // your ajax submit
    $(".attachmentsUpload input.file").val("");
});

Update

This, for any reason, does not work in IE9. You can replace the element to reset them. In this case you need jQuery live() to bind the event, because your input field will dynamically (re)created. This will work in all browsers.

I found this solution on the stackoverflow answer Clearing input type='file' using jQuery

$(".attachmentsUpload input.file").live("change", function () {
    if ($(".attachmentsUpload input.file").val() == "") {
        return;
    }
    // get the inputs value
    var fileInputContent = $(".attachmentsUpload input.file").val();
    // your ajax submit
    alert("submit value of the file input field=" + fileInputContent);
    // reset the field
    $(".attachmentsUpload input.file").replaceWith('<input type="file" class="file" name="file" />');
});​

More Information

• jQuery.live()
• jQuery.replaceWith()

Check out my updated jsFiddle

Note: live is now removed from later versions of jQuery. Please use on instead of live.

Answer 2

Based on dknaack answer, the clue is usage of jquery live to bind change event and resetting the input field after submit:

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $('form').submit();  /* sync submit */
        $(".attachmentsUpload input.file").replaceWith('<input type="file" class="file" name="file" />');
    });
});

The resetting must be performed after submit event is done. When the submit is async, reset the field for example in ajax success event.

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $('form').submit();  /* async submit */
    });
});

.ajaxForm({
    ...
    success: function (result) {
        // reset the field - needed for IE to upload the same file second time                    
        $this.find("input.file").replaceWith('<input type="file" class="file" name="file" />');
    }
});