How to Create Upload Image On Website using JavaScript is an easy process that lets users select and preview images directly on your webpage. By using a basic HTML file input and a small JavaScript function, you can show the uploaded image instantly without refreshing the page. This feature is useful for profile sections, forms, and any website where users need to upload photos.
step 1 : HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Uploader</title>
<link rel="stylesheet" href="style.css">
<!-- Google Font Link -->
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playwrite+CU:wght@100..400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rowdies:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="uploader">
<div id="profilepic"></div>
<label for="file">Upload Pic</label>
<input type="file" id="file" accept="image/*">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
step 2 : CSS Styling
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: poppins;
}
.container{
width: 100%;
height: 100vh;
background-image: linear-gradient(45deg, red,black);
display: flex;
justify-content: center;
align-items: center;
}
.uploader{
width: 200px;
height: auto;
padding: 30px 10px;
background-color: white;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
#profilepic{
width: 150px;
height: 150px;
border: 1px solid black;
border-radius: 10px;
}
#file{
display: none;
}
label{
width: 120px;
height: 40px;
background-color: red;
text-align: center;
line-height: 40px;
font-size: 13px;
font-weight: 600;
color: white;
border-radius: 10px;
cursor: pointer;
}
step 3 : JavaScript Function
var imagebox = document.getElementById("profilepic");
var uploadbtn = document.getElementById("file");
uploadbtn.onchange = function()
{
var reader = new FileReader();
reader.readAsDataURL(uploadbtn.files[0]);
reader.onload = function()
{
var filename = reader.result;
imagebox.style.background = "url("+filename+")";
imagebox.style.backgroundSize = "cover";
imagebox.style.backgroundPosition = "center";
}
}