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

은 리더가 function handleReaderLoad(evt) { 호를 갖는 것으로 onload 이벤트로 나타나 있지만 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를 생성하는 기능을 복귀하여 온로드 이벤트를 선언함으로써 동작하고, 리더는 readAsDataURL() 방법을 사용하여,이 경우, 함수의 끝에 데이터 판독하여 콘텐츠를 주어진 .