未调用 HTML5 FileReader API onload 事件答案

【问题标题】：HTML5 FileReader API onload event not called未调用 HTML5 FileReader API onload 事件
【发布时间】：2013-06-29 06:00:51
【问题描述】：

我正在尝试实现 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) 变量从未记录在控制台中。我错过了什么？

【问题讨论】：

标签： javascript jquery html filereader

【解决方案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() 方法。

【讨论】：