为什么这个 FileReader onload 没有触发？

Question

我从这个工作的 JavaScript 代码开始：

  // Begin File Open Code. 
  function fileOpen()
  {

    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('iDisplay');

    fileInput.addEventListener('change', function(e)
    {
      file = fileInput.files[0];
      var imageType = /image.*/;
      if (file.type.match(imageType)) 
      {
        var reader = new FileReader();
        reader.onload = function(e)
        {                 
          iDisplay.innerHTML = "";
          image = new Image();
          image.src = reader.result;
          image.id = "I";               // Add an id attribute so the image editor code can access the image.  
          iDisplay.appendChild(image);
          image.onload = function()
          {
            c = document.getElementById("canvas1"); 
            context = c.getContext("2d");
            c.width = image.width; 
            c.height = image.height; 
            context.drawImage(image,0,0);  
          }                
        }
        reader.readAsDataURL(file);             
        moreFiles++;  
        document.getElementById("fileInput").disabled = true; 
        document.getElementById("fileInputD").innerHTML = '<p>Please refresh page to open a new image</p>'; 
      }
      else
      {
        iDisplay.innerHTML = "File type not supported."
      }
  }); 

}
// End File Open Code

并尝试将其分解为两个独立的函数，fileOpen() 和 loadImage()。原因是 loadImage 也将用于加载默认图像。我想出了几个非工作版本。在阅读了这里的主题之后，最近这个答案Javascript FileReader onload not firing我将代码调整如下：

  // Begin File Open Code 
  function fileOpen(radio)
  {

    fileInput = document.getElementById('fileInput');
    fileDisplayArea = document.getElementById('iDisplay');

    fileInput.addEventListener('change', function(e)
    {
      file = fileInput.files[0];
      var imageType = /image.*/;
      if (file.type.match(imageType)) 
      {
        reader = new FileReader();
        reader.onload = fileSelected; 
        function fileSelected(e)
        {                 
          iDisplay.innerHTML = "";
          image = new Image();
          image.src = reader.result;
          image.id = "I";               // Add an id attribute so the image editor code can access the image.  
          iDisplay.appendChild(image);
          image.onload = loadImage(); 
        }
      }
      else
      {
        iDisplay.innerHTML = "File type not supported."
            }
    })      
  }         
  // End File Open Code 

  // Begin Load Image Code - This will be used to load a preselected image  
    function loadImage()
    {
        c = document.getElementById("canvas1"); 
        context = c.getContext("2d");
        c.width = image.width; 
        c.height = image.height; 
        context.drawImage(image,0,0);  

        reader.readAsDataURL(file);             
        document.getElementById("fileInput").disabled = true; 
        document.getElementById("fileInputD").innerHTML = '<p>Please refresh page to open a new image</p>'; 
      }
      // End Load Image Code  

但是，在 Chrome Inspector 中查看后，代码永远无法通过

    reader.onload = fileSelected;

在该行之后，函数退出，并且没有加载任何内容。我花了几个小时研究这段代码的变体，但无法让它越过那条线。所以，我的问题是“为什么？”我应该注意我想继续使用纯 JavaScript。

谢谢提前。

Answer 1

Chrome 73 中似乎存在一个错误，如果您有 debugger 语句，它不会被触发。

我真的有

        reader.readAsText(blob); 
        debugger;

它永远不会命中onload

如果我把它改成

        debugger;
        reader.readAsText(blob); 

然后就可以了。

由 Chrome 75 修复。

Answer 2

您还可以使用 FileReader.readAsDataURL() 从您的 .这将在内存中创建一个字符串，其中包含图像的 base64 表示。

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

参考：Preview an image before it is uploaded