This way
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
#dvPreview img
{
height:100px;
width:100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload").change(function () {
$("#dvPreview").html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
$("#dvPreview").show();
for (var i = 0; i < $(this)[0].files.length; i++) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $("<img />");
img.attr("src", e.target.result);
$("#dvPreview").append(img);
}
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
</head>
<body>
<div>
<input id="fileupload" type="file" multiple="multiple" />
<hr />
<b>Live Preview</b>
<br />
<br />
<div id="dvPreview">
</div>
</div>
</body>
</html>
Demo
