I thought I'd show a code example, as this is the idea of StackOverflow. I hope it illustrates how this thing works.
Instead of relying on a set of plugins and libraries you will find out that it is perhaps even easier with native javascript. You can add jQuery to the mix for event handling, etc if you want, it is pretty much standard in the web-dev toolkit anyway.
HTML
First lets add the html for the input and a placeholder img element. You could of course dynamically add the img file with jQuery or native js.
<input id='ourfile' type='file' />
<!-- The image placeholder for our preview -->
<img id='preview' src='' />
Javascript
// Lets cache our two elements of interest.
ourfile = document.getElementById('ourfile');
preview = document.getElementById('preview');
// Create an instance of the 'native' FileReader.
fr = new FileReader();
// When our input triggers change (i.e. image is selected) load the file using the file reader.
ourfile.onchange = function () {
file = ourfile.files[0];
fr.readAsDataURL(file);
}
// Bind to the `onload` event of our FileReader and set the src of the image to the result (base64 of the image).
fr.onload = function(){
preview.src = fr.result;
}
Details
The link in @Akki619's answer shows about details for checking validity of the image, etc.
Fiddle
Here is a link to a working example:
http://jsfiddle.net/rUvUX/4/
srcattribute in the img tag with the provided url from file..attr()selector to change thesrcattribute of a HTMLimgelement, but without any extra information about what you are trying to do and why, it's difficult to suggest anything further.