取消文件上传时删除图像预览

Question

I am trying to preview an image before uploading it.To that end, i have an which will load the picture whenever a user uploads a picture.

By clicking the image that is preview, the user is able to cancel the upload, and the image previewed will disappear.However, if the user has already selected an image, and then click ' cancel ' when choosing a file to upload(because he changed his mind etc), the image that was previously selected will still remain, and will not disappear.

Is there anyway to remove the image that was previewed in this case?

HTML:

<input type='file' id='input1'>
<img id='imagepreview1'>

jQuery:

$(document).ready(function(){

    function readURL(input) {        
        if (input.files && input.files[0]) {
            var reader = new FileReader();        
            reader.onload = function (e) {
                $('#imagepreview1').prop('src', e.target.result).show();
            }        
            reader.readAsDataURL(input.files[0]);
        }
    }

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

    $('#imagepreview1').click(function(){        
        $('#input1').replaceWith($('#input1').clone(true));
        $('#imagepreview1').hide();        
    });

});

Answer 1

Remove the src of image every time you click ,

$("#input1").click(function () {    
    $('#imagepreview1').attr('src','');
});

DEMO

Answer 2

I'd do something like adding a class to the image if it's been changed, and then either hide it or update its src later:

http://jsfiddle.net/isherwood/LCrE4/3

$('#imagepreview1').prop('src', e.target.result).show().addClass('selected');

...

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');
});