清除后如何删除图像预览？

Question

我有一个预览所选图像的程序。这是我使用的代码。

的Javascript

function readURL(input) {

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

            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }

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

    $("#uploadphoto").change(function(){
        readURL(this);
        $('#preview').show();
    }); 

但是当我用它删除它时：

$('#preview').on("click", function () {
     $('#uploadphoto').replaceWith( selected_photo = $('#uploadphoto').clone( true ) );
     $('#preview').attr('src', '');
});

照片仍然显示。当我提交页面时，照片未提交，我想要，但如何摆脱预览图像？ $('#preview').attr('src', '');似乎不起作用......？

Answer 1

你可以使用removeProp（），因为只更改属性是不够的：

function readURL(input) {

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

        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result).show();
        }

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

$("#uploadphoto").change(function () {
    readURL(this);
    $('#preview').show();
});

$('#preview').on("click", function () {
    $('#uploadphoto').replaceWith(selected_photo = $('#uploadphoto').clone(true));
    $('#preview').removeProp('src').hide();
});

FIDDLE

您还应该隐藏并显示图像，以确保不显示“空图像”图标，或者您可以一起删除所有元素并每次插入一个新元素。

修改

要淡出图像，请执行以下操作：

$('#preview').on("click", function () {
    $('#preview').fadeOut(1000, function() {
        $(this).removeProp('src');
        $('#uploadphoto').replaceWith(selected_photo = $('#uploadphoto').clone(true));
    });
});