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

Posted 2023-02-25

【中文标题】取消文件上传时删除图像预览

【英文标题】：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'中。然后，如果我再次单击“选择文件”，当出现弹出窗口让我选择文件时，我单击取消，即使上传已取消，先前选择的图像的图像预览仍然存在。为什么图片预览没有消失？

【参考方案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');
);