<?php echo 'File has uploaded successfully.'; }else{ echo 'Some problem occurred, please try again.'; } } ?>
function filePreview(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#uploadForm + img').remove(); $('#uploadForm').after('<img src="'+e.target.result+'" width="450" height="300"/>'); } reader.readAsDataURL(input.files[0]); } } $("#file").change(function () { filePreview(this); });
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" /> <link rel="stylesheet" type="text/css" media="screen" href="bootstrap/css/bootstrap.min.css" /> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> </div> </nav> <div class="container-fluid"> <form method="post" action="upload.php" enctype="multipart/form-data" id="uploadForm"> <div class="button"> <input type="file" name="file" id="file" /> <input type="submit" class="btn btn-default" name="submit" value="Upload" style="margin-left: 385px;margin-top: -25px;"/> </div> </form> </div> </body> </html>