How to remove a selected file from the input file?

Question

I have seen a flaw with the file input in html. When the user uses the file input to select a file then that is fine, but if the user wants to remove the selected file and want a blank file input, then the user cant do this. Does anyone know how to remove a selected file from the file input?

Below is my file input code in jquery:

var $imagefile = $('<input />')
    .attr({
        type: 'file',
        name: 'imageFile',
        id: 'imageFile'
    });

Duplicate. See here for the answer: http://stackoverflow.com/a/1043969/507784 — GregL, Feb 07 '12 at 01:40
Voting to close as a duplicate of [Clearing using jQuery](http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery) — jfriend00, Feb 07 '12 at 01:52

score 1 · Answer 1 · answered Nov 04 '13 at 07:26

Great, it works...

function reset_html(id)
{
    $('#'+id).html($('#'+id).html());
}

$(document).ready(function()
{
    var file_input_index = 0;
    $('input[type=file]').each(function()
    {
        file_input_index++;
        $(this).wrap('<div id="file_input_container_'+file_input_index+'"></div>');
        $(this).after('<input type="button" value="Clear" onclick="reset_html(\'file_input_container_'+file_input_index+'\')" />');
    });
});

How to remove a selected file from the input file?

1 Answers1