Preview an image before it is uploaded using jquery

dipesh

 

I want to be able to preview a file (image) before it is uploaded. The preview action should be executed all in the browser without using Ajax to upload the image.

in this post i will show you step by step how to preview an image before it is uploaded 

 

Our Best Popular Projects & Posts

Post Link
School Management System With Full Source Code In php click here
ecommerce project in php click here
simple login and registration form in php click here
Synopsis for online rooms booking project based on PHP click here
add multiple images in codeigniter click here
beginners project in php with source code click here
dynamic country state dropdown in codeigniter click here
how to generate pdf using dompdf in codeigniter click here
add 1 day to current date in php click here
how to check website/blog responsive or not? click here
employee attendance management system project in php with source code click here
Select one checkbox and disable others click here
printing div content with css applied click here
best restaurants management system in php click here
Preview an image before it is uploaded using jquery click here
text editor in jquery click here
data table with export button in html click here
add multiple images in codeigniter click here
codeigniter some steps to install on Your server click here
ajax in php/codeigniter click here
Create Simple API CRUD with PHP and MySQL click here
How to integrate bootstrap theme in codeigniter click here
how to prepare for interview click here
Convert a date format in PHP click here
how to export html table to excel in jquery click here
how to create duplicate google peg using ajax click here
how to make dropdown searchable in html using jquery click here
how to find retirement date in php click here
online food order system in php with source code click here
school management project admin panel in php click here


 


 <!DOCTYPE html>

      <html>

      <head>

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title></title>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

     

      </head>

      <body>

      <form runat="server">

  <input accept="image/*" type='file' id="imgInp" />

  <img id="blah" src="#" alt="your image" />

</form>

      </body>

      <script type="text/javascript">

      imgInp.onchange = evt => {

  const [file] = imgInp.files

  if (file) {

    blah.src = URL.createObjectURL(file)

  }

}

      </script>

      </html>

0 Comments