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

Question

在上传it.To之前，我试着预览一个图片，当用户上传图片时，我有一个会加载图片的图片。

通过单击预览图像，用户可以取消上传，而预览的图像将是disappear.However，如果用户已经选择了图像，然后在选择要上载的文件时单击“取消”(因为他改变了主意等)，以前选择的图像仍然会保留，不会消失。

是否要删除在这种情况下预览的图像？

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

每次单击时移除图像的src，

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

DEMO

Answer 2

如果对图像进行了更改，我将执行如下操作:向图像添加类，然后将其隐藏，或在稍后更新它的src：

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