取消文件上传时删除图像预览答案

【问题标题】：Removing an image preview when file upload is cancelled取消文件上传时删除图像预览
【发布时间】：2013-12-02 15:49:19
【问题描述】：

我正在尝试在上传图片之前对其进行预览。为此，我有一个在用户上传图片时会加载图片的工具。

通过点击预览的图片，用户可以取消上传，预览的图片会消失。但是，如果用户已经选择了一张图片，然后点击'取消 ' 选择要上传的文件时（因为他改变主意等），之前选择的图像仍会保留，不会消失。

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

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

});

【问题讨论】：

jsfiddle.net/LCrE4
jsfiddle.net/74vyw这就是你想要的
@UDB 不。我的意思是如果我单击“选择文件”并选择要上传的文件，图片将出现在#imagepreview1'中。然后，如果我再次单击“选择文件”，当出现弹出窗口让我选择文件时，我单击取消，即使上传已取消，先前选择的图像的图像预览仍然存在。为什么图片预览没有消失？

标签： javascript jquery html image

【解决方案1】：

每次点击时删除图片的src，

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

DEMO

【讨论】：

HTML5 验证需要 src 属性（并且不能为空）。

【解决方案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');
});

【讨论】：