从html表单选择路径后显示图片

时间:2016-04-04 12:36:08

标签: javascript jquery forms

我有一个示例代码,用于在使用jquery从html表单中选择路径后显示图像。代码在这里:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Image Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

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

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

    $("#imgInp").change(function(){
        readURL(this);
    });
    </script>
  </head>

  <body>
        <form id="form12" runat="server">
          <input type='file' id="imgInp" />
          <img id="blah" src="#" alt="your image" />
        </form>

  </body>
</html>

但是在选择图像后,只显示了路径,我看不到任何图片。哪里可能有问题?

2 个答案:

答案 0 :(得分:2)

在最后关闭script标记之前附加body标记,以便在script执行之前完全加载DOM。

在这种情况下,当您的代码正在查找元素时,它尚未加载到DOM中,因此您无法使其正常工作。

&#13;
&#13;
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Image Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <form id="form12" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
  </form>

<script>
 function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

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

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

$("#imgInp").change(function() {
  readURL(this);
});
</script>

</body>

</html>
&#13;
&#13;
&#13;

答案 1 :(得分:-2)

你还没有指定路径。你的图像src有&#34;#&#34;登录。