admin管理员组

文章数量:1265465

I am reading an array via JavaScript and saving the size of that array in a reader.onload event. I think that the reader.onload function is called when the file has finished uploading. event.target.result stores that array. I would like that array saved as a variable to be used in other functions but, I tried initializing an empty array and using the 

slice

function but, it didn't work. The console returns an undefined value.

Here is the code 

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

I am reading an array via JavaScript and saving the size of that array in a reader.onload event. I think that the reader.onload function is called when the file has finished uploading. event.target.result stores that array. I would like that array saved as a variable to be used in other functions but, I tried initializing an empty array and using the 

slice

function but, it didn't work. The console returns an undefined value.

Here is the code 

<!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
Share Improve this question edited Mar 29, 2017 at 16:30 kgui asked Jan 6, 2016 at 0:33 kguikgui 4,1655 gold badges43 silver badges55 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 6

onload happens asynchronously. So whatever logic depends on myArray needs to happen within that onload function.

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

This is very, very similar to the often asked question (regarding AJAX/async callbacks) How to return value from an asynchronous callback function?

By the way, this is asynchronous because we don't want to block the entire user interface while waiting for the potentially long operation of reading a file. That's why we're using an onload handler here.

Check this code .. i think you will understand what was your mistake 

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

Not sure if this would help anyone, I was trying this in angular 11. Since onload happens asynchronously. we need to use observable to return the final object which is being processed in the reader.onload block.

calledFunction(event){
    const file = event.target.files[0];
    reader.readAsArrayBuffer(file);
    return New Observable((subscriber: any)=>{
        reader.onload = function(event) {
          var arrayBuffer = event.target.result;
          var myArray = arrayBuffer.slice(0);
          document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
    
          subscriber.next(myArray) // myArray object will be returned to the calling function
          subscriber.plete(); // Complete the subscriber
        }
    })
}

now you can call this function anywhere you want as service or function call

calledService.calledFunction(event).subscrib(result=>{
    console.log(result)
    // To do your logic based on the result object
})

本文标签： javascriptReturn variable from a readeronload eventStack Overflow

版权声明：本文标题：javascript - Return variable from a reader.onload event - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741055550a2331693.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。