Preview Image before Upload using jQuery

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>

Labels: