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

JavascriptWeb DevelopmentObject Oriented Programming

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

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form runat="server">
<input type='file' id="yourImage" />
<img id="chooseImage" src="#" alt="image" />
</form>
<script>
   function readImage(fileInput) {
      if (fileInput.files && fileInput.files[0]) {
         var takingInputFile = new FileReader();
         takingInputFile.onload = function(event) {
            $('#chooseImage').attr('src', event.target.result);
         }
         takingInputFile.readAsDataURL(fileInput.files[0]);
      }
   }
   $("#yourImage").change(function() {
      readImage(this);
   });
</script>
</body>
</html>

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.

Output

raja
Published on 16-Jul-2020 06:42:40
Advertisements