如何使FileReader与Angular2一起工作

前端之家收集整理的这篇文章主要介绍了如何使FileReader与Angular2一起工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使FileReader与Angular2一起使用!

从客户端用Angular2和Typescript读取文件时,

我以这种方式尝试使用FileReader:

var fileReader = new FileReader();
fileReader.onload = function(e) {
    console.log("run fileReader.onload");
   //  ......
}@H_403_6@ 
 

但它根本不起作用,这个’fileReader.onload’函数永远不会被调用.

真的需要一个解决方案来阅读文件,请帮忙.
谢谢

从在线IDE检查:

预习:
https://angular2-butaixianran.c9.io/src/index.html

编辑:
https://ide.c9.io/butaixianran/angular2

首先,您必须在模板中的input表单上指定change事件的目标:
@View({
  template:`
    <div>
      Select file:
      <input type="file" (change)="changeListener($event)">
    </div>
  `
})@H_403_6@ 
 

可以看到我将changeListener()方法绑定到(更改)事件.我的班级实施:

changeListener($event) : void {
    this.readThis($event.target);
  }

  readThis(inputValue: any) : void {
    var file:File = inputValue.files[0]; 
    var myReader:FileReader = new FileReader();

    myReader.onloadend = function(e){
      // you can perform an action with readed data here
      console.log(myReader.result);
    }

    myReader.readAsText(file);
  }@H_403_6@ 
 

侦听器将文件从事件传递到readThis方法.阅读这个已经实现了它自己的FileReader.您也可以在函数中定义FileReader在组件中.

猜你在找的Angularjs相关文章