How to preview an image before it is uploaded in JavaScript?

To upload an image, use FileReader() in JavaScript. Following is the JavaScript code −


 Live Demo

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//">
<script src=""></script>
<script src=""></script>
<form runat="server">
<input type='file' id="yourImage" />
<img id="chooseImage" src="#" alt="image" />
   function readImage(fileInput) {
      if (fileInput.files && fileInput.files[0]) {
         var takingInputFile = new FileReader();
         takingInputFile.onload = function(event) {
   $("#yourImage").change(function() {

To run the above program, save the file name anyName.html(index.html) and right click on the file and select the option Open with live server in VS code editor.