は角 - そのコンテンツファイルを読み込み、解析

Question

私は以下のように選択したファイルを保持しているファイルアップロードコントロール、

<div class="Block"> 
    <label id="lbl">File </label> 
    <input #fileInput type='file'/> 
</div> 

私が持っているとして、以下のボタンを提出し、

<button type="button" class="btn btn-primary" 
    (click)="uploadDocument()">Upload File</button> 

私が選択していファイルをクリックし、アップロードボタンをクリックします。ファイルをサーバーに送信せずに、ファイルから内容を読み込む必要があります。

注：ファイルの種類は、あなたは、そのcsvファイル

は、以下のようにオブジェクトにファイルを保存するために、ファイル変更イベントを追加して、これを達成するためにJavaScriptでFileReaderを使用することができますcsv

Answer 1

、

になります

<div class="Block"> 
    <label id="lbl">Code </label> 
    <input type='file' (change)="fileChanged($event)"> 

</div> 

機能は

file:any; 
fileChanged(e) { 
    this.file = e.target.files[0]; 
} 

後に使用されるオブジェクトにファイルを設定する必要があります

送信ボタンをクリックすると、あなたが以下のようにコンテンツを取得するためにJavaScriptでFileReaderのreadAsText()方法を使用することができ、

uploadDocument(file) { 
    let fileReader = new FileReader(); 
    fileReader.onload = (e) => { 
     console.log(fileReader.result); 
    } 
    fileReader.readAsText(this.file); 
} 

注：コンテンツはので、あなたのロジック読み取られた後onloadイベントが発生します関数onLoadの中になければなりません。

Answer 2

あなたが入力の外にファイルを引っ張ると私はtypescriptですでハッシュマップにFileReaderのに解析されたレコードを保存することができますどのように

readFile(file: File) { 
    var reader = new FileReader(); 
    reader.onload =() => { 
     console.log(reader.result); 
    }; 
    reader.readAsText(file); 
}