FileReader和回調

Question

我很努力地重新找到想法/代碼here（基本前提是通過查看數據的前幾個字節來計算文件類型）。

我得到了我想做的事情的裸骨 - 請參閱JSFIDDLE。

繼承人我的代碼：

function readTheFiles(file){ 

      var fileReader = new FileReader(); 
      fileReader.onloadend = function(e) { 
      var fileHeader = new Uint8Array(e.target.result).subarray(0, 4); 
      var header = ""; 
      for (var q = 0; q < fileHeader.length; q++) { 
      header += fileHeader[q].toString(16); 
      } 
      alert(header); 
      return header;    
      }; 
fileReader.readAsArrayBuffer(file); 

} 


$("#input-id").on('change', function(event) { 
     var files = event.target.files; 
     var i = 0; 
     for (var i = 0, file; file = files[i]; i++) { 

     var headString = readTheFiles(file); 
     alert(headString); 

     }  
    }); 

。據我讀（example 1，example 2）我敢肯定，問題在於要求在readTheFiles回調功能 - 大概代碼調用警報（ headString）在文件加載之前（因此爲什麼readTheFiles函數給出了預期的結果）。

我很想了解校長，而不是隻是得到一個解決方案，所以任何指針/建議/援助將受到感謝。

非常感謝

Answer 1

我回答你關於爲什麼你alert(headstring)電話告訴你「不確定」的問題。可能有更好的方法來發現你正在處理的文件類型。

您正在使用異步進程。我修改並評論了您的代碼，以便您可以查看發生的順序。您將看到我創建的treat函數與您的on("change", ...)函數的作用域相同。然後，我通過這個函數作爲參數傳遞給readTheFiles()功能，以便它可以在文件中被讀取叫回來。

function readTheFiles(file, callback, index){ 

    var fileReader = new FileReader(); 

    // 3. This function will be called when readAsArrayBuffer() has 
    // finished reading the file 
    fileReader.onloadend = function(e) { 
     var fileHeader = new Uint8Array(e.target.result).subarray(0, 4); 
     var header = ""; 
     for (var q = 0; q < fileHeader.length; q++) { 
      header += fileHeader[q].toString(16); 
     } 

     callback(header, index); 
    }; 

    // 2. This gets called almost as soon as fileReader has been created 
    fileReader.readAsArrayBuffer(file); 
} 


$("#input-id").on('change', function(event) { 
    var files = event.target.files; 
    var i = 0; 
    for (var i = 0, file; file = files[i]; i++) { 
     // 1. This is executed for each file that you selected, immediately 
     // after selection. The treat() function is sent as a callback. 
     // It will be called later, when the file has been read in. 
     // Passing `i` as an argument allows you to see which order the 
     // files are treated in. 
    var headString = readTheFiles(file, treat, i); 
    } 

    // 4. This is called by the callback(header) command inside the 
    // readTheFiles() function. The `treat` function was sent to 
    // readTheFiles as the `callback` argument. Putting brackets() 
    // after the function name executes it. Any value put inside 
    // the brackets is sent as an argument to this function. 
    function treat(header, index) { 
     alert("Header for file " + index + ":" + header); 
    } 
});