HTML5 FileReader API onload事件不叫

Question

我試圖實現FileReader API來讀取音頻文件，但腳本永遠不會從它看起來的那一點。我的功能在下面，問題在於reader.onload = handleReaderLoad;線。

function setupFS(file) { 
    console.log('setupFS function entered.'); 
    var reader = new FileReader(); 
    console.log(reader); 
    reader.onload = handleReaderLoad; 
} 

function handleReaderLoad(evt) { 
    console.log(reader); 
    var audioSrc = $('.file-playlist table tr:nth-child(n+1) td:first-child'); 
    console.log(audioSrc); 
    console.log(reader.readAsDataURL(file)); 
    audioSrc.attr('data-src', reader.readAsDataURL(file)); 
} 

在控制檯中，讀者展示了onload事件爲具有function handleReaderLoad(evt) {電話，但reader，audioSrc和reader.readAsDataURL(file)變量在控制檯從未登錄。 我錯過了什麼？

Answer 1

我已經想通了FileReader API如何設置事件。使用FileReader的主要過程通過創建FileReader，然後聲明其任何/所有事件，如下面顯示的onload或onloadend事件來工作。這個過程也可以被壓縮成一個主要功能。

function readFile(file) { 
    var audioSrc; 
    audioSrc = $('.file-playlist table tr:nth-child(' + n + ') td:first-child'); 
    var progress = $('.file-playlist table tr:nth-child(' + n + ') td:last-child progress'); 
    n++; 
    progress.removeAttr('value'); 
    progress.attr('data-mod', 'true'); 
    var reader = new FileReader(); 
    reader.onload = (function(file) { 
     return function(e) { 
      audioSrc.attr('data-src', e.target.result); 
      $('.file-playlist audio source').attr('data-src', e.target.result); 
      progress.attr('value', '100'); 
      console.log('onload stage finished'); 
     }; 
    })(file); 
    reader.onloadend = (function() { 
     audioSrc.text(file.name); 
    }); 
    reader.readAsDataURL(file); 
} 

的功能的工作原理是創建的FileReader，然後通過返回函數聲明其的onload事件，並且讀取器由在函數結束在數據讀出通過使用readAsDataURL()方法給定內容，在這種情況下。