Preview image fadein

Question

I have a form which uses this little script found here to output the currently uploaded image to the visitor's browser itself. The output of the image is too abrupt. How do i make this script to fadein the image into the 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>

Here is the html if it helps. Thanks in advance.

<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>

Just on a small note preivew is normally spelled preview. Just make sure your css has the same spelling. — Pogrindis, Oct 11 '13 at 10:45

score 0 · Accepted Answer · edited Oct 11 '13 at 15:03

0

You should hide the preview class first..

CSS

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

then in your readeronload you could use the .show / .toggle jquery commands..

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

You can also decide on other options : http://api.jquery.com/show/

I think this is what you are looking for..

edited Oct 11 '13 at 15:03

gurung

612
2
10
32

answered Oct 11 '13 at 10:42

Pogrindis

6,561
5
25
40

Did not work. Still able to retrieve the preview-image but NOT fading in. FYI I am on FFox 24.0 if it matters and am testing this on live server. – gurung Oct 11 '13 at 11:01
also make sure you have the correct class name matched.. so for example i have used the example you gave : inline-image-preivew – Pogrindis Oct 11 '13 at 11:11

Stephen James · Answer 2 · 2013-10-11T11:42:13.467

You can make the image fade in using CSS3 transitions, or the jQuery library.

Here is a fiddle with using jQuery.fadeIn()

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

(In your case you would base this on the image being uploaded not the button click)

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

Using your code, this should be something like :

additional css

#blah 
{
    display : none;
}

JavaScript code

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

As an alternative, here's a link to a blog post about CSS transitions for opacity :

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

This only seems to work with the button in it. My case as you mentioned is different. I tried this earlier and failed. I am going to try the css approach though. Thank you. — gurung, Oct 11 '13 at 11:05

Preview image fadein

2 Answers2