Чтение и вывод данных из нескольких файлов
Здравствуйте!
Есть такая проблема, не получается прочитать и вывести данные из нескольких файлов (пробовал на 2, 3 и 4 файлах формата ".html"). При выборе файлов и запуске скрипта выводятся данные ТОЛЬКО из последнего выбранного файла. Причем выводятся столько раз, сколько выбрано файлов. НО! если в определенное место вписать "alert()" (в приведенном коде указано куда), то все работает верно и выводятся все данные. Написал такой код: html:
<input type="file" id="file" multiple>
<button onclick="readFile(document.getElementById('file'))">Прочитать!</button>
<div id="text"> </div>
javascript:
function readFile(object)
{
//если вписать сюда alert(); то все работает верно, иначе выводит данные на каждом шаге цикла только из последнего файла
var i;
var file = object.files;
var f;
for (i = 0, f; f = file[i]; i++)
{
reader = new FileReader();
reader.onload = function()
{
document.getElementById('text').innerHTML += reader.result;
document.getElementById('text').innerHTML += "</br>";
}
reader.readAsText(f);
}
}
javascript'ом занимаюсь недавно. Вопрос: 1. как сделать верно вывод данных из файла, без "alert()" 2. как можно сделать открытие файлов без использования "input". Пробовал через массив, в котором находятся пути к файлам, не получилось. |
рекурсия
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="file" id="file" multiple>
<button onclick="readFile(document.getElementById('file'))">Прочитать!</button>
<div id="text"> </div>
<script type="text/javascript">
function readFile(object)
{
//если вписать сюда alert(); то все работает верно, иначе выводит данные на каждом шаге цикла только из последнего файла
var i=0;
var file = object.files;
var f;
(function fn(){
f = file[i++];
reader = new FileReader();
reader.onload = function(){
document.getElementById('text').innerHTML += reader.result;
document.getElementById('text').innerHTML += "</br>";
if(file[i]) fn();
};
reader.readAsText(f);
})();
}
</script>
</body>
</html>
|
|
Promise.all
Только чтение файла надо "промисифицировать" |
Благодарю! Помогло)
Можете еще пояснить, почему при добавлении "alert()" код работал верно? |
Nikc174,
alert задерживал выполнение и файл успевал прочитаться. |
j0hnik,
понятно. А кроме как через "input" файлы вообще никак нельзя открыть? |
Либо кнопка либо дроп файл, других способов не знаю, может и есть какой костыль для какого нибудь браузера.
|
| Часовой пояс GMT +3, время: 12:15. |