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.

Answer 1

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.