web-dev-qa-db-ja.com

angular 2)を使用して、ファイルクライアント側をアップロードおよび読み取ります

それらを読み取って分析できるように、ユーザーからのログファイルが必要です。たとえば、ユーザーがファイルをドロップするドロップ領域のようなもので、JavaScriptで読み取ることができますか?

私はAngular2rc5を使用しています。 node.jsをバックサイドで実行していますが、そこにデータは必要ありません。クライアント側でのみ必要です。

Angle2やjavascriptなどのフロントエンド技術だけでファイルコンテンツを読み取って解析することは可能ですか?または、ファイルをサーバーにアップロードしてそこで分析する必要がありますか?

7
Katu

可能です!

こうやってやった。これにより、ファイルダイアログで選択されたすべてのファイルが読み取られます。これらをnode.jsに送信する必要はありません。これらはクライアントで操作できます。

<input type='file' accept='text/plain' multiple (change)='openFile($event)'>

openFile(event) {
    let input = event.target;
    for (var index = 0; index < input.files.length; index++) {
        let reader = new FileReader();
        reader.onload = () => {
            // this 'text' is the content of the file
            var text = reader.result;
        }
        reader.readAsText(input.files[index]);
    };
}

それはあなたがそれを行う方法の非常に基本的な例です。

17
Katu