Как я могу прочитать локальный файл, когда пользователь нажимает кнопку, используя 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, но вы всегда можете получить вспомогательный элемент DOMElement из элемента jQuery, используя .get(0), поэтому вы можете получить доступ к своим файлам здесь:

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

Или с простым JavaScript:

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