0

Anybody know how to overwrite a default image by the input image? Not sure how to handle try many ways still couldn't get it right. Appreciate anyone could help. Thanks

My code is as belows:-

<style>
    .imageUpload {
        background-image: url(../Images/Main/add.png);
        background-size: 100px;
        width: 100px;
        height: 100px;
        cursor: pointer;
        background-position: center;
        background-repeat: no-repeat;
    }
 </style>

 <script type="text/javascript">
    function changeImage() 
    {
        document.getElementById("img1").src = document.getElementById("frontdoor").value;
    }
 </script>

 <div class="form-group">
     <div class="col-sm-3">
       <label for="frontdoor" runat="server">Front Door</label>
       <div class="imageUpload" id="img1">
         <input type="file" id="frontdoor" class="uploadButton" onchange="changeImage"  name="img1" accept="image/jpg" runat="server" />
        </div>
     </div>
 </div>
Vincent Hew
  • 1
  • `id=img1` isn't unique (you have it twice in your code), trying to access `.src` on non-image element... Check console first and remove syntax errors. – pavel Jan 05 '21 at 16:25

0 Answers0