javascript - 清除时如何删除图像预览？

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

小提琴

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

编辑：

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

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