Question

我正在通过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>

Answer 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处理程序的原因。

Answer 2

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

＆＃13;

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

＆＃13;

从reader.onload事件返回变量

2 个答案: