Question

我创建了一个表单，要求用户上传他/她的照片。但我无法保存图像的编码值。我想将此值保存在变量中。我不知道为什么我的值没有保存在'result'变量中。

 <html>
<body>
<input type="file" id="inp"/>
<img id="img" />
<div id="b64"></div>

<script type="text/javascript">
function EL(id) { return document.getElementById(id); } 

function readFile() {
  if (this.files && this.files[0]) {
    var FR= new FileReader();
    FR.onload = function(e) {
      EL("img").src       = e.target.result;
      EL("b64").innerHTML = e.target.result;
    };       
   var result = FR.readAsDataURL( this.files[0] );
    console.log(result);
  }
}

EL("inp").addEventListener("change", readFile, false);

</script>
</body>
</html>

Answer 1

因为事件onload以异步方式运行，并且您尝试同步访问该值，结果为undefined

在onload内移动您的逻辑，或者如果您想要同步代码样式，请使用promises。

<html>
<body>
<input type="file" id="inp"/>
<img id="img" />
<div id="b64"></div>

<script type="text/javascript">
function EL(id) { return document.getElementById(id); } 

function readFile() {
  if (this.files && this.files[0]) {
    var FR= new FileReader();
    FR.onload = function(e) {
      EL("img").src       = e.target.result;
      EL("b64").innerHTML = e.target.result;

      //put your code here
      console.log(e.target.result);

    };       
    FR.readAsDataURL( this.files[0] );
  }
}

EL("inp").addEventListener("change", readFile, false);

</script>
</body>
</html>

值不会存储在变量中

1 个答案: