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

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

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

2 个答案: