从输入标签显示图像,无法在src中检索数据

时间:2017-11-25 15:57:28

标签: javascript html input src

这里我有一个在我的网页上显示图像的功能。但问题是当我试图检索" src" (显然我试图在base64中编码数据)我得到一个空字符串,但我可以看到我的网站上的图像以及src的值: Screenshot1

这是我的函数,console.log(reader.result)的结果是一个空字符串。

HTML:

<input id="avatar" type="file" onchange="previewFile()">
<img id="image" width="200px">

Javascript:

function previewFile() {
      var preview = document.getElementById("image");
      var file    = document.querySelector('input[type=file]').files[0];
      var reader  = new FileReader();

      reader.addEventListener("load", function () {
        preview.src = reader.result;
      }, false);

      if (file) {
        var el = reader.readAsDataURL(file);
      }
        console.log(reader.result);
    }

我怎样才能获得数据?

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

console.log输出空白的原因是因为您在加载图像之前调用它。将console.log移动到加载功能,您将看到输出。

function previewFile() {

      var preview = document.getElementById("image");
      var file    = document.querySelector('input[type=file]').files[0];
      var reader  = new FileReader();

      reader.addEventListener("load", function () {
        preview.src = reader.result;
        console.log(reader.result);
      }, false);

      if (file) {
        var el = reader.readAsDataURL(file);
      }


}