Пример кода (
Оригинал на сайте CodePen
):
<input type="file" id="file">
<button onclick="readFile(document.getElementById('file'))">Read!</button>
<div id="out"></div>
<script type="text/javascript">
function readFile(object) {
var file = object.files[0]
var reader = new FileReader()
reader.onload = function() {
document.getElementById('out').innerHTML = reader.result //или event.target.result
};
reader.onerror = function(event) {
console.error("Файл не может быть прочитан! код " + event.target.error.code);
};
reader.readAsText(file)
}
</script>
Этот пример просто читает содержимое файла и выводит его в виде обычного текста. Обработчик события onload вызывается, когда файл успешно прочитан в то время, как OnError вызывается, если файл не был прочитан по каким-то причинам. Объект типа FileReader доступен внутри обработчика события через event.target. В случае успеха чтения данных, в поле result, будет содержимое файла, иначе информацию об ошибках.