Mon -
Sun 8.00 AM - 8.00 PM
JavaScript
)
In this tutorial we will learn how to preview an image before it is uploaded using javascript.
Let's see example -
How to preview an image before it is uploaded using javascript
1) Use below HTML ( You can use your own design)
when use your custom design then make sure that all the ' id ' attributes are added properly to your HTML where actually it can work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview an image before it is uploaded using javascript</title>
</head>
<body>
<div class="mainDiv">
<label class="imgUploadBtn" for="profileImage">
<img src="https://www.teknowize.com/attachments/file_1662497424.svg" alt="profile image" class="img-fluid" width="20">
<input type="file" id="profileImage" hidden accept="image/*">
</label>
<img src="https://www.teknowize.com/attachments/file_1662497380.svg" alt="profile image" class="img-fluid" width="200" height="200">
<div class="imgMainDiv">
<img src="https://www.teknowize.com/attachments/file_1662497486.svg" id="ProImgId" alt="profile image" class="img-fluid">
</div>
</div>
</body>
</html>
2) Now write CSS to design above HTML using below code.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.mainDiv {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.imgMainDiv {
position: absolute;
background: #E9EAEB;
width: 165px;
height: 165px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden !important;
}
.imgMainDiv img {
width: 100%;
height: 100%;
object-fit: fill;
}
.imgUploadBtn {
position: absolute;
width: 50px;
height: 50px;
top: 0px;
right: 15px;
background: #F3F3F4;
border: 1px solid #2A5082;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
cursor: pointer;
}
.imgUploadBtn:hover{
background: #00f7ff;
}
3) Use below js to show preview of selected image.
profileImage.onchange = evt => {
const [file] = profileImage.files
if (file) {
ProImgId.src = URL.createObjectURL(file)
}
}
Now combine all the HTML CSS and JS codes together
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview an image before it is uploaded using javascript</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.mainDiv {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.imgMainDiv {
position: absolute;
background: #E9EAEB;
width: 165px;
height: 165px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden !important;
}
.imgMainDiv img {
width: 100%;
height: 100%;
object-fit: fill;
}
.imgUploadBtn {
position: absolute;
width: 50px;
height: 50px;
top: 0px;
right: 15px;
background: #F3F3F4;
border: 1px solid #2A5082;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
cursor: pointer;
}
.imgUploadBtn:hover{
background: #00f7ff;
}
</style>
</head>
<body>
<div class="mainDiv">
<label class="imgUploadBtn" for="profileImage">
<img src="https://www.teknowize.com/attachments/file_1662497424.svg" alt="profile image" class="img-fluid" width="20">
<input type="file" id="profileImage" hidden accept="image/*">
</label>
<img src="https://www.teknowize.com/attachments/file_1662497380.svg" alt="profile image" class="img-fluid" width="200" height="200">
<div class="imgMainDiv">
<img src="https://www.teknowize.com/attachments/file_1662497486.svg" id="ProImgId" alt="profile image" class="img-fluid">
</div>
</div>
<script>
profileImage.onchange = evt => {
const [file] = profileImage.files
if (file) {
ProImgId.src = URL.createObjectURL(file)
}
}
</script>
</body>
</html>
Output
