how to convert input type file into an icon

Hello guys! In this article I have shared the details about “how to convert input type file into an icon”. Okay, let’s move on to the article.

how to convert input type file into an icon

<div class="image-upload">
      <label for="file-input">
        <img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
      </label>

      <input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
    </div>




<script>
        function previewFile(input)
            var file = $("input[type=file]").get(0).files[0];

            if(file)
              var reader = new FileReader();

              reader.onload = function()
                  $("#previewImg").attr("src", reader.result);
              

              reader.readAsDataURL(file);
            
        
    </script>

Final Words

I hope this post helps you to know about “how to convert input type file into an icon”. If you have any queries regarding this tutorial please let us know via the comment section. Share this post with your friends & family via social networks.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coder Diksha. Here, I post about programming to help developers.

Share on:

Leave a Comment