2

我有一个表单，它使用此处找到的这个小脚本将当前上传的图像输出到访问者的浏览器本身。图像的输出太突然了。我如何使这个脚本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>
4

2 回答 2

0

你应该先隐藏预览类..

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/

我想这就是你要找的..

于 2013-10-11T10:42:33.370 回答
0

您可以使用 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);
    });
});

作为替代方案，这里有一篇关于 opacity 的 CSS 过渡的博客文章的链接：

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

于 2013-10-11T10:48:30.797 回答