How to upload an image with jQuery client side and add it to a div?

Question

So basically, as the title says, I want to have an upload button that allows a client to upload an image and it will then be displayed in a div.

Of course, this would just be client side, so if the page was ever refreshed then the image would disappear.

The image would then be styled accordingly and given fixed widths and heights.

I searched online and couldn't find anything at all.

Very new to jQuery, although I can code fluently in Javascript.

Also not to sure if this is possible or not without the help of AJAX and/or PHP. Would like to avoid these if possible.

All help is greatly appreciated.

Solution

Here is a working JSFiddle for what you are looking for

function readURL(e) {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        $(reader).load(function(e) { $('#blah').attr('src', e.target.result); });
        reader.readAsDataURL(this.files[0]);
    }
}

$("#imgInp").change(readURL);

As a side note, the above solution uses jQuery although it is not required for a working solution, Javascript only :

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('blah').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

And the HTML:

        <input type='file' id="imgInp" onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />

---

function readURL() {
	//	rehide the image and remove its current "src",
	//	this way if the new image doesn't load,
	//	then the image element is "gone" for now
	$('#blah').attr('src', '').hide();
	if (this.files && this.files[0]) {
		var reader = new FileReader();
		$(reader).load(function(e) {
			$('#blah')
				//	first we set the attribute of "src" thus changing the image link
				.attr('src', e.target.result)	//	this will now call the load event on the image
		});
		reader.readAsDataURL(this.files[0]);
	}
}

//	below makes use of jQuery chaining. This means the same element is returned after each method, so we don't need to call it again
$('#blah')
	//	here we first set a "load" event for the image that will cause it change it's height to a set variable
	//		and make it "show" when finished loading
	.load(function(e) {
		//	$(this) is the jQuery OBJECT of this which is the element we've called on this load method
		$(this)
			//	note how easy adding css is, just create an object of the css you want to change or a key/value pair of STRINGS
			.css('height', '200px')	//	or .css({ height: '200px' })
			//	now for the next "method" in the chain, we show the image when loaded
			.show();	//	just that simple
	})
	//	with the load event set, we now hide the image as it has nothing in it to start with
	.hide();	//	done

$("#imgInp").change(readURL);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>

See the jsFiddle Fork made here to help explain how to make more use of jQuery to answer some of your comment questions.

Comments

[SpYk3HH]

Dang you! That's exactly what I was putting together! LoL

[Fizzix]

Wow, works great! Thanks for your help! And unluck SpYk3HH, but theres an upvote for you anyways haha.

[SpYk3HH]

BTW, you can easily shorten that by making readURL the function of the change.

[Fizzix]

Not to sure how to do that haha... How would I add styling to the created image? Such as a width and height, or even easier, just a CSS class?

[Nunners]

@fizzix you simply add the class to the <img> tag that you are setting the src of.

[Fizzix]

Ahh alright. I can see that now. So only the img tags source is changing, it isn't actually being created every time. Fantastic, thanks for your answer :)

[Fizzix]

Although, would it be possible to not display the img until an upload is made? Otherwise there will always be a broken image before the first upload.

[Nunners]

Set the display=none on the image and once the line reader.readAsDataURL(input.files[0]); has run set the display to be block. i.e. <img id="blah" src="#" alt="your image" style="display:none;" /> and $('#blah').css('display', 'block');

[Nunners]

I'm not an as in depth user of jQuery @SpYk3HH :(. I often forget about the simpler jQuery methods...

[SpYk3HH]

It's ok. I updated this answer to include a fork of original fiddle that contains a "fuller" jQuery layout answering all of these questions. It's also "well" commented to help explain everything that is taking place

[Nunners]

@user1032531 True, but you can use a polyfill to replicate the functionality in Pre-IE10 browsers. Please note that these may require Flash/Silverlight to work