How to only clear file upload field?

Question

Here is the JSfiddle: http://jsfiddle.net/buyC9/128/

I want to clear only the file upload field when pressed on clear.

My HTML:

<h1>Upload image:</h1>
<input type="file" name="blog[opload]" id="blog_opload" class="imagec">
<input type="url" size="50" name="blog[url]" id="blog_url" class="imagec">
<div id="preview">
</div>

My Jquery:

$('input').change(function() {
    var el = $(this);
    if (this.value === "") {
        $('.imagec').prop('disabled', false);
        this.disabled = false;
        $('#preview').hide();
    } else {
        $('.imagec').prop('disabled', true);
        el.prop('disabled', false);
        alert(el.val());
        if (el.attr('type') == 'url') {
            $('#preview').show().html('<img src=' + '"' + el.val() + '"' + ' />');
        }
    }
});

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

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

When the button "clear" is click the file upload field should be cleared :) — Rails beginner, Feb 02 '12 at 19:40

score 8 · Answer 1 · edited Jun 20 '20 at 09:12

8

How about:

$('input[value="Clear"]').click(function(){
    $('#blog_opload').val('');
});

Example: jsFiddle

You could also get rid of onclick="reset_html(\'imagec_' + imagec_index + '\')" if you use this.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 02 '12 at 19:49

j08691

204,283
31
260
272

score 6 · Accepted Answer · edited May 23 '17 at 12:09

6

Quick answer is replace it:

$("#clear").click(function(event){
  event.preventDefault();
  $("#control").replaceWith("<input type='file' id='control' />");
});

<input type="file" id="control" />
<a href="#" id="clear">Clear</a>

edited May 23 '17 at 12:09

Community

1
1

answered Feb 02 '12 at 19:41

NoWar

36,338
80
323
498

score 2 · Answer 3 · answered Mar 09 '17 at 07:07

2

You can do simply

  $("#filuploadId")[0].value = "";

answered Mar 09 '17 at 07:07

Shahbaz Ahmad

161
1
9

score 0 · Answer 4 · answered Feb 02 '12 at 19:43

0

In your code you meant to use the ID selector but instead are using class selector.

$('.' + id).html( $('.' + id).html() );

should be

$('#' + id).html( $('#' + id).html() );

Updated jsFiddle

answered Feb 02 '12 at 19:43

amit_g

30,880
8
61
118

How to only clear file upload field?

4 Answers4

Linked