Here You Go:
HTML
<!DOCTYPE html>
<html>
<head>
<link
class="jsbin"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"
rel="stylesheet"
type="text/css"
/>
<script
class="jsbin"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
></script>
<script
class="jsbin"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"
></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
</style>
</head>
<body>
<input type="file" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</body>
</html>
Script:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result).width(150).height(200);
};
reader.readAsDataURL(input.files[0]);
}
}