我试图在上传之前预览图像。为此,我有一个在用户上传图片时将其加载的图片。

通过单击预览图像,用户可以取消上传,并且预览图像将消失。但是,如果用户已经选择了图像,则在选择要上传的文件时单击“取消”(因为他改变主意等),先前选择的图像仍将保留,并且不会消失。

无论如何,在这种情况下是否要删除预览的图像?

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

10-05 20:50
查看更多