Online Snippets Library

Image preview before upload using jQuery

Below example will work only in latest browser.

Example

HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"> </script>
<title>Image preview before upload using jQuery</title>
</head>
<body>
<form id="form" method="post" enctype="multipart/form-data">
<div>
<input type="file" name="filUpload" id="filUpload" onchange="showPreview(this)" />
</div>
<img id="imgPreview" alt="uploaded image preview" width="500" height="500" />
</form>
</body>
</html>
Javascript
function showPreview(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function(e) {
$('#imgPreview').attr('src', e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}