从 reader.onload 事件返回变量答案

【问题标题】：Return variable from a reader.onload event从 reader.onload 事件返回变量
【发布时间】：2016-01-06 00:33:43
【问题描述】：

我正在通过JavaScript 读取一个数组，并将该数组的大小保存在 reader.onload 事件中。我认为文件上传完成后会调用reader.onload 函数。 event.target.result 存储该数组。我希望将该数组保存为变量以在其他函数中使用，但是我尝试初始化一个空数组并使用

slice

功能，但是，它没有工作。控制台返回一个未定义的值。

这里是代码

<!DOCTYPE html>
<html>
<head>
    <title> Home Page </title>
</head>

<body>
    <input type="file" id="file" name="files[]" multiple/>
    <output id="list"></output>

    <p id="demo"></p>

    <script>
      function handleFileSelect(evt) { 
        // grab the file that was uploaded which is type File. 
        // evt is the event that was triggered
        // evt.target returns the element that triggered the event 
        // evt.target.files[0] returns the file that was uploaded, type File
        var file = evt.target.files[0]; 

        var myArray = [];
        // instantiate a FileReader object to read/save the file that was uploaded
        var reader = new FileReader();
          // when the load event is fired (the file has finished uploading) this function is called
        reader.onload = function(event) {
          // the result attribute contains an ArrayBuffer representing the file's data. 
          var arrayBuffer = event.target.result;
          myArray = arrayBuffer.slice(0);
          document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
        }

        // read the file and save as an array. Once the read is finished loadend is triggered
        reader.readAsArrayBuffer(file);
        console.log(myArray.byteLength);
      }

      //console.log(myArray.byteLength);
      document.getElementById('file').addEventListener('change', handleFileSelect, false);
    </script>
</body>

【问题讨论】：

标签： javascript jquery html fileapi

【解决方案1】：

onload 异步发生。所以任何依赖于myArray 的逻辑都需要在onload 函数中发生。

    reader.onload = function(event) {
      var arrayBuffer = event.target.result;
      var myArray = arrayBuffer.slice(0);
      document.getElementById("demo").innerHTML = arrayBuffer.byteLength;

      // this needs to happen here
      console.log(myArray.byteLength);
    }

    reader.readAsArrayBuffer(file);

这与常见问题（关于 AJAX/异步回调）How to return value from an asynchronous callback function?

非常非常相似

顺便说一下，这是异步的，因为我们不想在等待读取文件的潜在长时间操作时阻塞整个用户界面。这就是我们在这里使用onload 处理程序的原因。

【讨论】：

这是否意味着我不能在该函数之外使用 myArray ？我想将它的内容回显到屏幕上，并让该字符串可用于创建想法等。
@Crt，正确。所有这些逻辑都需要在回调内部发生。

【解决方案2】：

检查这段代码..我想你会明白你的错误是什么

<body>
    <input type="file" id="file" name="files[]" multiple/>
    <output id="list"></output>

    <p id="demo"></p>
    <p id="log"></p>

    <script>
      function onReadFinish(result){
      console.log("Read Finished: "  + result.byteLength);
         document.getElementById("log").innerHTML = "Read Finished: "  + result.byteLength;
      }
      function handleFileSelect(evt) { 
        // grab the file that was uploaded which is type File. 
        // evt is the event that was triggered
        // evt.target returns the element that triggered the event 
        // evt.target.files[0] returns the file that was uploaded, type File
        var file = evt.target.files[0]; 

        var myArray = [];
        // instantiate a FileReader object to read/save the file that was uploaded
        var reader = new FileReader();
          // when the load event is fired (the file has finished uploading) this function is called
        reader.onload = function(event) {
          // the result attribute contains an ArrayBuffer representing the file's data. 
          var arrayBuffer = event.target.result;
          myArray = arrayBuffer.slice(0);
          onReadFinish(myArray);
          document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
        }

        // read the file and save as an array. Once the read is finished loadend is triggered
        reader.readAsArrayBuffer(file);
        
      }

      //console.log(myArray.byteLength);
      document.getElementById('file').addEventListener('change', handleFileSelect, false);
    </script>
</body>

【讨论】：

@SaItuk 当我运行该代码时，控制台中没有弹出任何内容。
是的，显示了arrayBuffer的大小，但没有别的
成功了！但是，我的问题是如何保存该数组以在函数之外使用。
@Crt ，您是否设法在函数外使用了数组？如果有，怎么做？