为什么这个FileReader onload没有触发？ [英] Why is this FileReader onload not firing?

问题描述

我从这个有用的JavaScript代码开始：

I am starting with this working JavaScript code:

  // 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 我调整了代码如下：

And trying to break it up into two separate functions, fileOpen() and loadImage(). The reason is that loadImage will also be used to load default images. I came up with several non-working versions. After reading about the topic here, most recently this answer Javascript FileReader onload not firing I adjusted the code as follows:

  // 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，代码永远不会过去

But, after reviewing in the Chrome Inspector, the code never gets past

    reader.onload = fileSelected;

在该行之后，函数退出，并且没有加载任何内容。我花了好几个小时来处理这段代码的变化，并且无法通过这条代码来解决它。所以，我的问题是为什么？我应该注意，我想继续使用纯JavaScript。

After that line, the function exits, and nothing is loaded. I have spent hours on variations of this code and cannot get it to fire past that line. So, my question is "why?" I should note that I want to stay with pure JavaScript.

提前谢谢。

推荐答案

Chrome 73中似乎存在一个错误，如果你有，它就不会被触发调试器声明。

There appears to be a bug in Chrome 73 where it isn't fired if you have a debugger statement.

我确实有

        reader.readAsText(blob); 
        debugger;

它永远不会点击 onload

如果我将其更改为

        debugger;
        reader.readAsText(blob); 

然后运作。

修正者Chrome 75。

Fixed by Chrome 75.

这篇关于为什么这个FileReader onload没有触发？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！