Question

我有一个表单，它使用这个小脚本found here将当前上传的图像输出到访问者的浏览器本身。图像的输出太突然了。如何将此脚本fadein映像到div #blah中。

<script>
$(document).ready(function() { 
    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]);
        }
    }

    $("#image-one").change(function(){
        readURL(this);
    });
});
</script>

如果它有帮助，这是html。提前谢谢。

<fieldset class="images">
    <label for="image" class="label">UPLOAD IMAGE :</label>
    <input type="file" name="image-one" id="image-one" tabindex="25" required=""/>
</fieldset>

<div class="inline-image-preivew">
    <img id="blah" src="#" width="300" align="center"/>
</div>

Answer 1

您应首先隐藏预览类..

CSS

.inline-image-preivew
{
  display:none;
}

然后在你的readeronload中你可以使用.show / .toggle jquery命令..

 reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                    $('.inline-image-preview')fadeIn( "slow", function() {
    // Animation complete
  });

您还可以决定其他选项：http://api.jquery.com/show/

我认为这就是你要找的......

Answer 2

您可以使用CSS3过渡或jQuery库使图像淡入。

这是使用jQuery.fadeIn()

的小提琴

http://jsfiddle.net/Q5KtC/1/

（在您的情况下，您将基于上传的图像而非按钮点击）

// With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#kitten" ).fadeIn( "slow", function() {
    // Animation complete
  });
});

使用您的代码，应该是这样的：

额外的css

#blah 
{
    display : none;
}

JavaScript代码

$(document).ready(function() { 
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .fadeIn("slow");

            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#image-one").change(function(){
        readURL(this);
    });
});

作为替代方案，这里有关于不透明度的CSS过渡的博客文章的链接：

http://bavotasan.com/2011/a-simple-fade-with-css3/

预览图片fadein

2 个答案: