Preview Image before Upload using jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Image before Upload using jQuery</title>
<style type="text/css">
form{float: left;width: 100%;}
.div-center img{float: left;margin-top: 20px;}
embed{float: left;margin-top: 20px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="div-center">
<form method="post" action="" enctype="multipart/form-data" id="uploadForm">
<input type="file" name="file" id="file" />
</form>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function filePreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#uploadForm + embed').remove();
$('#uploadForm').after('<embed src="'+e.target.result+'" width="450" height="300">');
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file").change(function () {
filePreview(this);
});
</script>
</body>
</html>
VIDEO
