Friday, March 28, 2014

Share It

How to display preview of image before upload using JQuery

When our application needs to have an option for image uploads we use input tag in a form. The upload process is handled inside a PHP file which we can discuss in future. We have already discussed about hiding an image which is broken. File uploading is very easy but sometimes we even want to preview the image before it is uploaded.

For this purpose we can use JQuery code which will show the image before it is uploaded. Today I am going to discuss about the code which helps you preview the image before upload.
Here is the code for showing image before uploading.

JQuery:

$(document).ready(function(){
    $("#image").change(function(){
        var file = document.getElementById("image").files[0];
        var readImg = new FileReader();
        readImg.readAsDataURL(file);
        readImg.onload = function(e) {
        $('.imagepreview').attr('src',e.target.result).fadeIn();
            }
        })
})

This code uses the advantage of HTML5 attribute. FileReader reads the file, here the file is an image. It fetches the URL of the current image to show up when it is selected through file browser field.

The above code jquery code fetches the image and shows the preview. Below is the HTML code which refers the above jquery code.

HTML:

<input name="image" type="file" class="image" id="image"><br/>
<img class="imagepreview" src="">

Since the above HTML code has no image in the source it displays a broken image, so in order to eliminate the broken image we can use the code for this link to avoid broken images or we can use the following CSS code instead of the code specified in the link. I recommend you to use the CSS code below.

CSS:

.imagepreview{width:500px;
display:none;}

Here are some helpful posts for bloggers and web designers.

Add Google Plus Follower Gadget For Blogger

How to add floating widget to blogger blog

Add awesome sticky footer menu to Blogger with simple HTML

How to trace details of an unknown person with mobile number

Why every freelance worker wants to be a blogger?

Which is the best way to optimize mobile site?

How facebook fan page can make you money?

Separate Contact page in Blogger

How to add Contact Form Widget to blogger Official Plugin

SEO Title Tag Best Practices

How to disable graph search on facebook/trick to remove facebook graph

How to find fake profile pictures on facebook?

Add Facebook Like Button below posts titles (Speed Loading)

How to delete Facebook account permanently?

How to use facebook on slow internet connections

How to delete Google Search History/Cache?

8 Tips to reduce load time of Blog/Website

Xenon Blogger Template Download

3 ways to make money online

5 Idiotic ways you can promote your blog

 

I have given you three blocks of code for image preview. Look below for the complete code after combining all the above blocks of code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview image before upload by TricksTown.com</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#image").change(function(){
        var file = document.getElementById("image").files[0];
        var readImg = new FileReader();
        readImg.readAsDataURL(file);
        readImg.onload = function(e) {
        $('.imagepreview').attr('src',e.target.result).fadeIn();
            }
        })
})
</script>
<style>
.imagepreview{width:500px;
display:none;}
</style>
</head>
<body>
<input name="image" type="file" class="image" id="image"><br/>
<img class="imagepreview" src="">
</body>
</html>

Copy the above code and paste it in your notepad. Save it with .html extension and check it.

Enjoy... :) Happy coding.

Thank you. If you have any doubts, please comment below. Spam comments will be removed.
Author: Bhanu Chander Bathini (CEO, Tricks Town.)
Hey friends, I am Bhanu Chander a Web Designer/Developer, Content writer, Freelance SEO analyst and a blogger. I am pursuing my M.Tech in Computer Science and Engg. You can contact me on bhanu4funn@gmail.com for web design solutions at low cost with effective SEO.

0 comments: