Use the JS readAsDataURL() Method
You can use the JavaScript readAsDataURL() method of the FileReader object to read the contents of the specified file. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. The FileReader result property returns the file's contents.
Let's try out the following example which demonstrates how to read an image file using this method and preview it in the browser before it is uploaded on the server.
<!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){
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="/examples/images/transparent.png" alt="Placeholder">
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>
