图像预览 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>