javascript - 文件读取器 API 'load' 事件

Question

我目前正在从事 Unity Webgl 项目，我是 javascript 和 web 的新手。

在我的项目中，用户必须能够将图片和视频添加到 webgl 播放器，图片工作正常(感谢 gman 在这 thread 上的代码)。我用它作为我的脚本的基础。当然，我已经更改了输入接受，以便能够获取视频(仅限 mp4)。但是我遇到了一些麻烦。

我读过这个tutorial以及我找到的关于 javascript 文件、Blob 等的所有文档。但我没有让它工作。我相信 FileReader 有一些我不明白的地方，因为永远不会调用 "load" 监听器上的 console.log，同样“onerror” 监听器，除非我单击取消(来自代码 here)。

function getPic( evt ) {
    var file = document.querySelector( 'input[type=file]' ).files[0];
    var reader = new FileReader();

    reader.addEventListener( "onload", function () {
        reader.readAsDataURL( file );
        console.log( reader.result );
    }, false );
    reader.addEventListener( "onerror", function ( error ) {
        console.log( "error" + error );
    }, false );
}

我也尝试过 onloadend 但它不起作用，因为 onload/onloadend 监听器从未调用我的脚本 print "null"。这是一个好的开始还是有更简单的方法从用户计算机获取 video/image ？

Answer 1

FileReader.onload属性包含一个事件处理程序，当“加载”事件被触发时，当内容读取(例如 readAsDataURL)可用时执行

• 事件监听器应该监听'load'。事件而不是'onload'

---

reader.addEventListener("load", function(event) {...
reader.onload = function() {...

reader.readAsDataURL(file) 在回调函数中被调用

• 移动行 reader.readAsDataURL(file);在 'load' 事件回调函数之外

---

reader.addEventListener("load", function(){
   console.log(reader.result);
}, false);

reader.readAsDataURL(file);

https://jsfiddle.net/3vk4u0fr/