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

Removing an image preview when file upload is cancelled

本文关键字：图像 删除 文件 上载 取消      更新时间：2024-01-17

我正在尝试在上传图片之前预览它。为此，我有一个，每当用户上传图片时，它都会加载图片。

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

有没有办法删除在这种情况下预览的图像？

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

每次单击时删除图像的src，

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

DEMO

如果图像被更改，我会做一些事情，比如在图像中添加一个类，然后隐藏它或稍后更新它的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');
});
相关文章：