ユーザーがHTML5 File APIを使用してボタンを押したときにローカルファイルを読み取るにはどうすればよいですか？

Question

jQueryとHTML5 File APIを使用してローカルファイルからデータを取得しようとしています。私はファイルを読み込み、そこからテキストを取得したいが、入力フィールドの内容が変更されたときではなく、ユーザがボタンを押したときだけである。

files = $("#file").files; 
var reader = new FileReader(); 
reader.onload = function(event) { 
    var content = event.target.result; 
    alert(content); 
    agregar(content[0]); 
    alert(content); 
} 
reader.readAsText(files[0]); 

ユーザーがページ上のボタンを押したときにこのコードがトリガーされます。

は、ここで私が現在使用しているコードです。私の問題は、コードが実行されると、filesが定義されていないので、必要なデータを取得できないということです。 FileReader.readAsText()関数のパラメータとして渡すことができるように、入力ファイルの内容を取得するにはどうすればよいですか？

Answer 1

files配列は、<input type=file> DOMElementのプロパティです。私はjQueryを使ってそれにアクセスする方法を知りませんが、あなたは常に.get(0)を使用してjQueryの要素からバッキングDOMElementのを取得することができますので、あなたはここにあなたのファイルにアクセスすることができます

：

var files = $('#file').get(0).files; 

またはプレーンJavaScriptで

var files = document.getElementById('file').files;