画像プレビューjqueryコードが機能していません

Question

これは私のスクリプトとhtmlです。私はアップロードする前に画像をプレビューすることを望みます。私は一日をインターネットから検索しようとしましたが、すべてのページでこのスクリプトが見つかりました。しかし、それは私のプロジェクトでは機能していません。 解決策が必要です。

<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

ここでは、それがあなたを助けることを願っています。

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>