我喜欢让事情复杂化。这很有趣。

Question

我是新手，所以对我很轻松！下面我有一些代码，一旦选择了图像就会预览图像。然而，当没有选择图像时，它会出现这个可怕的盒子，当没有选择图像时它具有默认的图像符号。

如果没有选择任何内容并在某些内容显示时显示图像标记？

HTML

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#"  width="400" alt="your image" />
</form>

Javascript

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();            
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }            
        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

Answer 1

隐藏（.fadeIn()）：

$('#blah').fadeIn();

显示（.fadeOut()）：

$('#blah').fadeOut();

注意：.fadeIn（）和.fadeOut（）提供了很好的动画来显示/隐藏元素。

Answer 2

你可以试试这个

var src = $('#blah').attr('src');
if(src==="#"){
$('#blah').css('display','none');
}

并添加

$('#blah').css('display','inline');

到您的函数readURL，因此每次上传图片时再次显示<img>元素

DEMO

Answer 3

好吧，因为没有其他人有创意，我想这取决于我。

在新图片可用时注入：

....
reader.onload = function(evt) {
    var e = evt || window.event,
        $newImg = $('<img/>').after('#imgInp');
    $newImg
        .attr({id: 'blah', alt: 'your image', src: e.target.result})
        .width(400);
};
....

如果取消选择文件，还需要进行错误检查：

$('#imgInp').change(function() {
    if (this.files.length > 0 && $('#blah').is(':visible')) {
        $('#blah').remove();
    } else {
        readURL(this);
    }
});

jQuery显示和隐藏图像

3 个答案:

我喜欢让事情复杂化。这很有趣。