Upload and Display Image using jQuery

Upload and Display Image using jQuery

Introduction

In this tutorial we will create a Upload and Display Image with jQuery. This tutorial purpose is to teach how to properly upload and display an image. This will cover all the important parts for creating an uploading form. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is easy to understand just follow my instruction I provided and you can do it without a problem. This program is useful if you want upload a profile image for your registered account. I will try my best to give you the easiest way of creating this program Upload and Display Image using jQuery. So let's do the coding.

Before we get started:

First you have to download the jQuery plugin.

Here is the link for the jQuery that i used in this tutorial https://jquery.com/.

Lastly, this is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will the uploading form for the image upload. To create this simply copy and write it into your text editor, then save it as index.html.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  5. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  6. </head>
  7. <nav class="navbar navbar-default">
  8. <div class="container-fluid">
  9. <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
  10. </div>
  11. </nav>
  12. <div class="col-md-3"></div>
  13. <div class="col-md-6 well">
  14. <h3 class="text-primary">Upload and Display Image using jQuery</h3>
  15. <hr style="border-top:1px dotted #ccc;"/>
  16. <div class="col-md-1">
  17.  
  18. </div>
  19. <div class="col-md-8">
  20. <div id ="preview" style="width:500px; height:300px; border:1px solid #000;"></div>
  21. <form method="POST" enctype="multipart/form-data">
  22. <input type="file" id="photo" accept="image/*" />
  23. </form>
  24. </div>
  25. </div>
  26. </body>
  27. <script src="js/jquery-3.2.1.min.js"></script>
  28. <script src="script.js"></script>
  29. </html>

Creating JavaScript Function

This is where the main function of the application is. This code will upload the image file and then display it in the html page. To do this just copy and write these block of codes inside the text editor and save it as script.js.
  1. $(document).ready(function(){
  2. $pic = $('<img id = "image" width = "100%" height = "100%"/>');
  3. $("#photo").change(function(){
  4. var files = !!this.files ? this.files : [];
  5. if(!files.length || !window.FileReader){
  6. $("#image").remove();
  7. $lbl.appendTo("#preview");
  8. }
  9. if(/^image/.test(files[0].type)){
  10. var reader = new FileReader();
  11. reader.readAsDataURL(files[0]);
  12. reader.onloadend = function(){
  13. $pic.appendTo("#preview");
  14. $("#image").attr("src", this.result);
  15. }
  16. }
  17. });
  18. });

In the given code we first call the basic jQuery ready event to signal that the DOM of the page is now ready to be use. After that we create new variable with a new element called $pic. We then get the input file attribute using id and append it in change() function. This function will trigger an event when a certain file is uploaded.

After we uploaded the file then check the image if it is actually a image being upload. We use FileReader() function to read the image file. Then use readAsDataURL() to get the image url. After that we use onloadend() to display the image in the targeted div.

Output:

The Upload and Display Image using jQuery source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created Upload and Display Image using jQuery. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment