Skip to main content

Javascript - How to Upload Images Using jQuery


In this tutorial we will create a How to Upload Images using jQuery. JavaScript is a scripting or programming language that allows you to implement complex things on web pages. It is a text-based programming language meant to run as part of a web-based application. It is an interpreted programming language that has a capabilities of Object-Oriented. So Let's do the coding...

Getting started:

This is the link for the jquery that i used in this tutorial https://jquery.com/. Lastly, this is the link for the bootstrap that i used for the layout design https://getbootstrap.com/.

The Main Interface

This code contains the interface of the application. To create this just write these block of code inside the text editor and save this as index.html.

Javascript - How to Upload Images Using jQuery


Creating the Script

This code contains the script of the application. This code will upload the image file and display as a preview for checking. To do this just copy and write these block of codes as shown below inside the text editor and save it as script.js inside the js folder. $(document).ready(function(){ $pic = $(''); $("#file").change(function(){ var files = !!this.files ? this.files : []; if(!files.length || !window.FileReader){ $("#image").remove(); } if(/^image/.test(files[0].type)){ var reader = new FileReader(); reader.readAsDataURL(files[0]); reader.onloadend = function(){ $pic.appendTo("#preview"); $("#image").attr("src", this.result); } } }); }); There you have it we successfully created a How to Upload Images 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!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.