鍍金池/ 問答/HTML5  HTML/ fileReader.onload里嵌套的 img.onload 里面獲取不到外

fileReader.onload里嵌套的 img.onload 里面獲取不到外部的變量（異步，閉包）

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="file" onchange='fileChoosed(event)'>
  <img id='a'>
  <script>
    function fileChoosed(event) {
      console.log('aa');
      let file = event.target.files[0],
        fileName = file.name,
        img = document.getElementById('a'),
        fr = new FileReader(),
        ts = this;
      fr.addEventListener("load", () => {
        let blob = 'a';
        console.log(fileName, img, blob); //這里能獲取到三個變量
        img.onload = (img, blob, fileName) => {
          debugger;
          view.insertPicture(img, blob, fileName); //這里就獲取不到了
        };
        img.src = fr.result;
      });
      fr.readAsDataURL(file);
    }
  </script>
</body>

</html>

找了半天沒找到原因，求幫助

回答
編輯回答
逗婦乳

img.onload 哪個教程或者文檔告訴你 它是帶參的

自說自話的，加了三個參數(shù)進去，

img.onload 是被誰調(diào)用的，先要搞清楚

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="file" onchange='fileChoosed(event)'>
  <img id='a'>
  <script>
    function fileChoosed(event) {
      console.log('aa');
      let file = event.target.files[0],
        fileName = file.name,
        img = document.getElementById('a'),
        fr = new FileReader(),
        ts = this;
      fr.addEventListener("load", () => {
        let blob = 'a';
        console.log(fileName, img, blob); //這里能獲取到三個變量
        img.onload = () => { //不建議在瀏覽器里直接用箭頭函數(shù)，支持不好
          debugger;
          console.log(fileName, img, blob); 經(jīng)過測試是可以打印這三個變量的
        };
        img.src = fr.result;
      });
      fr.readAsDataURL(file);
    }
  </script>
</body>

</html>
2018年6月12日 14:59