FileReader API 'load' 事件
FileReader API 'load' event
我目前正在开发一个 Unity Webgl 项目,我是 javascript 和 web 的新手。
在我的项目中,用户必须能够将图片和视频添加到 webgl 播放器,图片工作正常(感谢 gman 的代码)。我用它作为我的脚本的基础。当然,我已经更改了输入接受,以便能够获取视频(仅限 mp4)。但是我遇到了一些麻烦。
我读过这个tutorial and all the doc I have found about javascript File, Blob, etc. But I didn't make it work. I believe there is something I don't understand with FileReader
since the console.log
on the "load"
listener is never called, same for the "onerror"
listener except when I click on cancel (from the code )。
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
侦听器从未调用我的脚本打印 "null"
。这是一个好的开始还是有更简单的方法从用户计算机获取 video/image
?
FileReader.onload 属性 包含在触发 'load' 事件时执行的事件处理程序,当内容读取(例如 readAsDataURL)可用时
- 事件监听器应该监听 'load' 事件而不是 'onload'
reader.addEventListener("load", function(event) {...
reader.onload = function() {...
reader.readAsDataURL(file) 在回调函数中被调用
- 移动行reader.readAsDataURL(文件);在 'load' 事件回调函数之外
reader.addEventListener("load", function(){
console.log(reader.result);
}, false);
reader.readAsDataURL(file);
我目前正在开发一个 Unity Webgl 项目,我是 javascript 和 web 的新手。
在我的项目中,用户必须能够将图片和视频添加到 webgl 播放器,图片工作正常(感谢 gman 的代码
我读过这个tutorial and all the doc I have found about javascript File, Blob, etc. But I didn't make it work. I believe there is something I don't understand with FileReader
since the console.log
on the "load"
listener is never called, same for the "onerror"
listener except when I click on cancel (from the code
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
侦听器从未调用我的脚本打印 "null"
。这是一个好的开始还是有更简单的方法从用户计算机获取 video/image
?
FileReader.onload 属性 包含在触发 'load' 事件时执行的事件处理程序,当内容读取(例如 readAsDataURL)可用时
- 事件监听器应该监听 'load' 事件而不是 'onload'
reader.addEventListener("load", function(event) {...
reader.onload = function() {...
reader.readAsDataURL(file) 在回调函数中被调用
- 移动行reader.readAsDataURL(文件);在 'load' 事件回调函数之外
reader.addEventListener("load", function(){
console.log(reader.result);
}, false);
reader.readAsDataURL(file);