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

Question

我试图在上传图像之前预览图像。为此，我有一个每当用户上传图片时就会加载图片的方法。

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

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

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