Bild Vorschau jquery Code funktioniert nicht

Question

Dies ist mein Skript und HTML. Ich möchte, dass ich Vorschaubild vor dem Hochladen werde. Ich habe den ganzen Tag versucht, aus dem Internet zu suchen und fand dieses Skript auf jeder Seite. Aber es funktioniert nicht an meinem Projekt. Benötigen Sie eine Lösung.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script type="text/javascript"> 
     function showimagepreview(input) { 
      if (input.files && input.files[0]) { 
       var filerdr = new FileReader(); 
       filerdr.onload = function (e) { 
        $('#Image1').attr('src', e.target.result); 
       } 
       filerdr.readAsDataURL(input.files[0]); 
      } 
     } 
</script> 

    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
         <div class="form-group"> 
         <asp:FileUpload ID="mcq1" runat="server" onchange="showimagepreview(this)" /> 
        </div> 
       </div> 
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
         <div class="form-group"> 

          <asp:Image ID="Image1" runat="server" CssClass="Imgstyle"/> 
        </div> 
       </div> 

Answer 1

Hier hoffe ich, dass es Ihnen helfen kann.

function readURL(input) { 
 

 
    if (input.files && input.files[0]) { 
 
     var reader = new FileReader(); 
 

 
     reader.onload = function (e) { 
 
      $('#preview').attr('src', e.target.result); 
 
      $('.previewimg').show(); 
 
     } 
 

 
     reader.readAsDataURL(input.files[0]); 
 
    } 
 
} 
 

 
$("#uploadImg").change(function(){ 
 
    readURL(this); 
 
});

.previewimg { 
 
    background: #ffff33; 
 
    width: 500px; 
 
    height: auto; 
 
    padding: 20px; 
 
    border-radius: 20px; 
 
    display: none; 
 
} 
 
.previewimg img { 
 
    width: 100%; 
 
    height: auto; 
 
}

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

 
<form id="form1" runat="server"> 
 
    <input type='file' id="uploadImg" /> 
 
</form> 
 

 
<div class="previewimg"> 
 
    <img id="preview" src="#" alt="your image" /> 
 
</div>