/Html/How to convert input type file into an icon

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>

Source: stackoverflow.com

Similar codes

1 vote261 views1 answer
Ardhaan's world
Html
5 votes263 views1 answer
Html bullet symbol
Html
0 vote249 views1 answer
Tailwind display inline block
Html
38 votes264 views6 answers
How to make a button in html
Html
9 votes246 views3 answers
Solid black line css
Html
32 votes234 views4 answers
How to change mouse pointer into cursor icon when you hover
Html
1 vote237 views1 answer
Html_entity_decode
Html
0 vote255 views1 answer
Html image fallback
Html
14 votes236 views2 answers
Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0.
Html
0 vote250 views1 answer
Hit a perticaulr ancor tag id
Html