jQuery <input> preview an image before it is uploaded
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Preview an Image Before it is Uploaded</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> function previewFile(input){ var file = $("input[type=file]").get(0).files[0]; if(file){/* ww w . j a v a 2 s . c o m*/ var reader = new FileReader(); reader.onload = function(){ $("#previewImg").attr("src", reader.result); } reader.readAsDataURL(file); } } </script> </head> <body> <form action="confirmation.php" method="post"> <p> <input type="file" name="photo" onchange="previewFile(this);" required> </p> <img id="previewImg" src="image1.png" alt="Placeholder"> <p> <input type="submit" value="Submit"> </p> </form> </body> </html>