In this article, we will see how to preview an image before uploading it in jquery. You can use the JavaScript readAsDataURL()
method of the FileReader
object to read the contents of the specified file. The readAsDataURL the method is used to read the contents of the specified Blob
or File
. When the read operation is finished, the readyState
becomes DONE
, and the loadend
is triggered.
So, let's see the preview image before uploading javascript, preview images using jquery.
Example:
how to read an image file using this method and preview it in the browser before it is uploaded to the server.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To Preview Image Before Upload In jQuery - Websolutionstuff</title>
<script src="https://code.jquery.com/jquery-3.5.1.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="image_upload.php" method="post">
<p>
<input type="file" name="image_file" onchange="previewFile(this);" required>
</p>
<img id="previewImg" src="/images/example.png" alt="Placeholder">
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>
You might also like:
In the dynamic world of web development, staying ahead of the curve is essential, and in 2023, React JS continues to be...
Aug-28-2023
In this tutorial, we will see paypal payment gateway integration in laravel 8. Paypal is an international payment p...
Jan-10-2022
In this article, we will see how to create a list and grid view using javascript. many times clients have requirements l...
Dec-23-2020
In this article, we will see the mix manifest does not exist in laravel 8 and laravel 9. We will solve the mix...
Oct-28-2022