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检查器中查看后，代码永远不会过去

    reader.onload = fileSelected;

在该行之后，该函数退出，并且未加载任何内容。我花了好几个小时来处理这段代码的变化，并且无法通过这条代码来解决它。所以，我的问题是＆＃34;为什么？＆＃34;我应该注意，我想继续使用纯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

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

2 个答案: