Return 来自 reader.onload 事件的变量

Question

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

slice

功能正常，但是没有效果。控制台 returns 一个未定义的值。

这是代码

<!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>

Answer 1

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

<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>

Answer 2

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/async 回调）How to return value from an asynchronous callback function?

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

Return 来自 reader.onload 事件的变量

Return variable from a reader.onload event

html

javascript

jquery

fileapi