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

在此，我希望它能为您提供帮助。

＆＃13;

Expression

＆＃13;

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);
});

＆＃13;

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

＆＃13;

图像预览jquery代码不起作用

1 个答案: