image preview using jquery
JavaScript

Preview of image before upload using jQuery

Ankit

today in this post we will learn how to Preview of image immediately after file is selected in file upload using jQuery. In our previous post we learn how to convert a number into words.
Most of the developer use this feature in their panel and it is a good practice. A good developer always thinks about his user and he provide a user friendly UI to his clients.

image preview using jquery

To begin with this tutorial we will take an short overview of jQuery and its useful features.

Why is Used in jQuery.

jQuery is a open source and light weight library of Java script, with the help of jQuery we can develop our website or software more interactive and attractive.
we can also handle such difficult task like event handling, AJAX and animation easily with the help of jQuery.

Add Minified Jquery file

so first of all we are add jquerymin.js and jquery-ui.min.js in the head section of html code.
after adding the jQuery files we are adding and input type file which will takes the file from our local system.

after selecting the file we will call an onchange function which will takes the file and read the file and preview the image file with the help of id.
just copy the below code and run it.

<script type="text/javascript">
		function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#viewfile')
                        .attr('src', e.target.result)
                        .width(150)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
	</script>

PHP Login Script With Remember me.
Unable to create a directory a wordpress error
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript

show image Complete code

<!DOCTYPE html>
<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>Shortlearner Jquery Tutorial</title>
</head>
<body>
	<script type="text/javascript">
		function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#viewfile')
                        .attr('src', e.target.result)
                        .width(150)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
	</script>
  <input type='file' onchange="readURL(this);" />
    <img id="viewfile" src="#"  />
</body>
</html>

after run the above code we will see the Preview of our image before upload with the help of jQuery.

if this tutorial helps you please share it with your developer buddies, and if you want to add something new method than contact us we will updated your methods too.
keep learning ,keep coding