upload and preview image using html css and javascript

Upload and Preview Image Using HTML, CSS and JavaScript

by

Hi Guys, I am back with another fantastic project in this project I used HTML, CSS, and a bit of JavaScript. This project is an Upload image and Preview.

NOTE: To stay informed about my exciting new projects, join our WhatsApp and Telegram community and be part of the conversation.”

Join Our WhatsApp Community
Join Our Telegram Channel

I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them as you want for free.

Recently I created a Mobile Icon Navigation Menu using HTML, CSS, and a little bit of JavaScript. I also share this source code in the blog post here you can check this Mobile App Icon Menu.

Upload and Preview Image

Upload and Preview image is a small javascript project for beginners. When you click to upload button a new window opens to select an image and preview when you select an image and click ok you can preview the image on the webpage. as shown in the given picture.

upload and preview image using html css and javascript

About This Project

The Coding Pakistan blog website embarked on this project with a noble aim: to provide cost-free assistance to students who are delving into the realm of programming languages and learning the ropes of web development technologies.

This initiative encompasses a wide range of valuable resources, covering essential languages such as HTML, CSS, JavaScript, and advanced frameworks like React.js and Next.js.

Created byCoding Pakistan
Languages HTML / CSS & JavaScript
Source CodeGitHub
PreviewTake Preview

How To Create a Upload and Preview Image Using HTML, CSS & JavaScript

There are some steps to create this type of Upload and Preview Image HTML, CSS, and JavaScript that are given below.

  1. The first step is to create one folder.
  2. Open this folder in Vs Code Editor and create three files HTML, CSS, and JavaScript
  3. Make sure the HTML file extension is (.html), the CSS file extension will be (.css) and the JavaScript file extension is (.js)
  4. After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
  5. Also, link the JavaScript file with the HTML file using this line of code <script src=”script.js”></script>
  6. The last step is copying and pasting the given code into your files.

Upload and Preview Image – Source Code

HTML FILE

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Created by www.codingpakistan.com -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload and Preview image</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

</head>
<body>
    <form action="" class="container">
        <div class="upload-upper">
            <i class='bx bxs-file-image'></i>
            <p>Drag here to Upload</p>
            <input type="file" id="file">
            <br>
            <label for="" class="Upload-btn">
                <p> <span class="first-text"> Choose File </span> </p>

            </label>
        </div>
        <img src="" alt="" id="image" class="image">
    </form>
</body>
<script src="script.js"></script>
</html>

CSS FILE

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: white;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #0a90ff;
}
.container{
    display: grid;
    width: 350px;
    background: white;
    padding: 60px;
    box-shadow:  0 0 20px rgba(0, 0,0.1,);
    border-radius: 5px;
    position: relative;
}
.upload-upper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px 20px;
    border:  2px dashed #0a90ff;
}
p{
    color: #0a90ff;
}
.upload-upper i{
    color: #0a90ff;
    font-size: 60px;
}
#file{
    position: absolute;
    opacity: 0;
    inset: 0;
    font-size: 40px;
    cursor: pointer;
}
.Upload-btn{
    background: #0a90ff;
    width: 230px;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    color: white;
    display: block;
}
.image{
    display: block;
    padding-top: 20px;
}
img{
    width: 100%;
    height: 200px;
}

JavaScript File

const file=document.querySelector('#file')
file.addEventListener("change", function(){
    const reader=new FileReader()
    reader.addEventListener("load",()=>{
        document.querySelector('#image').src=reader.result;

    })
    reader.readAsDataURL(this.files[0])
})

Video Tutorial – Upload and Preview Image

If you’re having trouble understanding this code and want to learn more about it, please watch this video and consider subscribing to this YouTube channel for similar videos in the future.

You Might Like This

Conclusion

Uploading and previewing images using HTML, CSS, and JavaScript allows users to select an image file and instantly view a preview on the web page. This functionality enhances user experience and enables them to make necessary adjustments before proceeding.

It finds practical applications in various domains and empowers web developers to create engaging platforms with seamless image management.

Leave a Comment