javascript - HTML5 FileReader 无法触发函数

Question

我正在尝试使用 HTML5 FileReader 加载 CSV 文件，但它的 onLoad 函数从未触发(尝试使用 Firefox 和 Chrome)。尽管它的 result 属性被文件内容填充，它的 readyState 被设置为 2 (DONE)，并且它的 error 属性保持为 null .它也不会产生任何控制台错误。我的代码如下:

var reader = new FileReader();

function process_file(file) {
    reader.onError = function(evt) {upload_failed("There was an error opening your CSV file. It may be corrupted.")};
    reader.onAbort = function(evt) {upload_failed("There was an error opening your CSV file. It may be corrupted.")};
    reader.onLoad = upload_complete;
    reader.readAsText(file);
    alert('Started');
}
function upload_complete(evt) {
    alert('Complete');
    csv_data = reader.result;
    $submit_button.prop('disabled', false);
}
function upload_failed(message) {
    alert('Failed');
    $submit_button.prop('disabled', true);
    alert(message);
}

“已启动”是唯一显示的警报。阅读器的其他属性是通过 Firefox 控制台访问的。 process_file函数运行通过:

<input type='file' onchange="process_file(this.files[0])" style="display: none;" accept=".csv"  "id and name etc..."/>

我想知道我做错了什么以及如何在加载文件时触发 onLoad 函数。

Answer 1

根据 FileReader docs，回调被传递给onload、onprogress 和onerror。您将它们驼峰式封装到 onLoad、onProgress 和 onError。

var reader = new FileReader();

function process_file(file) {
    reader.onerror = function(evt) {upload_failed("There was an error opening your CSV file. It may be corrupted.")};
    reader.onabort = function(evt) {upload_failed("There was an error opening your CSV file. It may be corrupted.")};
    reader.onload = upload_complete;
    reader.readAsText(file);
    alert('Started');
}