Clever Geek Handbook

Remove selected file from input type = File in IE

How to clear selected file in IE

The following example works in chrome but not IE (any version)

http://jsfiddle.net/nfvR9/1/

Html

<input id="file1" type="file" class="" multiple="" required="" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

Jquery

$("#fileUpload").val('');

As expected, IE doesn't support this.

+3


source to share


4 answers


I end up doing the following:

function reset_form_element(e) {
            e.wrap('<form>').parent('form').trigger('reset');
            e.unwrap();
        }


and then the function is called like below:

reset_form_element($('#file1'));
0


source


The input file list is read-only, so you cannot remove any files from it, therefore IE does not support clearing the input value.



+1


source


I would extend jQuery to have a "clearFiles" method. jQuery has deprecated jQuery.browser since 1.9, so I check if the browser is IE with a variable.

Function extension:

$.fn.extend({
    clearFiles: function () {
        $(this).each(function () {
            var isIE = (window.navigator.userAgent.indexOf("MSIE ") > 0 || !! navigator.userAgent.match(/Trident.*rv\:11\./));
            if ($(this).prop("type") == 'file') {
                if (isIE == true) {
                    $(this).replaceWith($(this).val('').clone(true));
                } else {
                    $(this).val("");
                }
            }
        });
        return this;
    }
});

Application:

$('#test').click(function () {
    $("[type='file']").clearFiles();
});

Here is a violin. fiddle

+1


source


you may have below workaround for IE

$("#image").remove("");
$("form").append(' <input id="image" type="file" name="image"/>');

fiddle- http://jsfiddle.net/nfvR9/25/

0


source






More articles:


All Articles