In this topic, We are going to see how to display images when we upload the image using the form.
Using this below script we can display selected images in the form.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').css("visibility","visible");
$('#blah')
.attr('src', e.target.result)
.width(100)
.height(100);
};
reader.readAsDataURL(input.files[0]);
}
}
Here is the full source code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blog Form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="card mt-5">
<div class="card-header">Image Form</div>
<div class="card-body">
<form id="form" action="" method="post" role="form" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6 mb-3">
<label for="imagepreview" class="pb-2">Image</label></br>
<input class="form-control-file" type="file" name="img" onchange="readURL(this)" >
</div>
<div class="col-md-6 mb-3">
<img id="blah" src="#" alt="wallpaper" style="visibility: hidden;" />
</div>
</div>
<button class="btn btn-primary" type="submit">Submit Form</button>
</form>
</div>
</div>
</div>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').css("visibility","visible");
$('#blah')
.attr('src', e.target.result)
.width(100)
.height(100);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
Output :
Thank You, hope you guys found something useful.
