Clear upload file name from file uploader

Question

HTML:

<input type="file" id="flIcon" />

In Jquery:

$('#btnAddNew').click(function(event) {
                    alert($("#flIcon").attr('file'));
                    $("div#flIcon").replaceWith("<input type='file' id='flIcon'/>");

                });

I see in FireBug when page Load:

<div id="uniform-flIcon" class="uploader">
<input id="flIcon" class=" " type="file" style="opacity: 0;">
<span class="filename" style="-moz-user-select: none;">document-save.png</span>
<span class="action" style="-moz-user-select: none;">Choose File</span>
</div>

I try it from this ref.Clearing <input type='file' /> using jQueryBut its not work for me.Is there any browser compatibility issue or i am missing some thing.Thanks.

its working fine with $("#flIcon").replaceWith('..'); here---http://jsfiddle.net/XFyuw/3/ — mini, Mar 02 '12 at 07:32
$('#btnAddNew').on('click(function(event){ alert($("#flIcon").attr('file')); $("div#flIcon").replaceWith(""); }); — Ohgodwhy, Mar 02 '12 at 07:34

score 1 · Accepted Answer · answered Mar 02 '12 at 07:32

1

Try like this:

<input type="file" id="flIcon" />
<div id="btnAddNew">Clear</div>

and then:

$('#btnAddNew').click(function(event) {
    $("#flIcon").replaceWith("<input type='file' id='flIcon'/>").html();
});

answered Mar 02 '12 at 07:32

Darin Dimitrov

1,023,142
271
3,287
2,928

score 0 · Answer 2 · answered Jul 27 '15 at 15:10

0

Yes Darin's solution works well.

Alternatively you could also clear by doing this using JQuery..

$('#flIcon').val('');

answered Jul 27 '15 at 15:10

Nikhil Nanjappa

6,454
3
28
44

Clear upload file name from file uploader

2 Answers2