CODEWITHSUNDEEP
javascriptjqueryhtml
Pink Code
Pink Code

Reputation: 1834

delete input select image preview using jQuery

I add image preview/delete before upload using jquery like this :

HTML is Here:

<input type='file' id='input1'>
<img id='imagepreview1' src="http://placehold.it/100x100" />

JS is Here:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#imagepreview1').prop('src', e.target.result).show().addClass('selected');
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#input1").change(function () {
    readURL(this);
    $('#imagepreview1').show();
});

var orig_src = $('#imagepreview1').prop('src');

$('#imagepreview1').click(function () {
    $('#input1').replaceWith($('#input1').clone(true));
    $('#imagepreview1').not('.selected').hide();
    $('#imagepreview1.selected').prop('src', orig_src).removeClass('selected');
});

Now, when I remove image with click this image input selected not remove and post data from my form. ho do can remove input select when I remove image?

Problem PIC (when I remove image and show preview):

enter image description here

NOTE: (I check In FF not worked)

DEMO HERE: http://jsfiddle.net/mkGSY/

Upvotes: 2

Views: 3262

Answers (2)

ˈvɔlə
ˈvɔlə

Reputation: 10242

Use native javascript

If everybody just use jQuery for such simple tasks, nobody will learn how the browser implementation of ECMAScript is really working.

You can easily use something like this:

document.getElementById('input1').reset(); // My favourite

or if you prefer the idea of resetting the value of the input-element:

document.getElementById('input1').value = ""; // Will work just in major browsers
document.getElementById('input1').value = null; // Much more cross-browser compatible

If you want to stick with jQuery

... do yourself a favour and use this approach which is extremly bulletproof (instead of using .val(''):

var input = $("#input1");

function clearFileUpload() {
  input.replaceWith(input.val('').clone(true));
};

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Just remove value from the input field.

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

Updated DEMO here.

Upvotes: 2

Related Questions