Chcę wczytać dane z pliku tekstowego aby potem je rozprowadzić po formularzu w odpowiednie rubryki (taka funkcja wczytywania kopii roboczej).
Znalazłem skrypt, który na moje potrzeby będzie super ale jest jeden problem, pewnie kuriozalny. Skrypt pobiera dane z pliku i wrzuca treść do diva, podczas gdy ja potrzebuję zapisać je do zmiennej, którą mógłbym wykorzystać w innych funkcjach w ramach tego programu. Zakładam, że problemem jest asynchroniczność funkcji..
<head>
<script>
var openFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var text = reader.result;
var node = document.getElementById('output'); //tutaj jest problem jak domniemam
node.innerText = text;
console.log(reader.result.substring(0, 200));
};
reader.readAsText(input.files[0]);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='openFile(event)'><br>
<div id='output'>
...
</div>
</body>
</html>
Lub z tego:
<head>
<script>
document.querySelector("#read-button").addEventListener('click', function() {
let file = document.querySelector("#file-input").files[0];
let reader = new FileReader();
reader.addEventListener('load', function(e) {
let text = e.target.result;
document.querySelector("#file-contents").textContent = text;
});
reader.readAsText(file);
});
</script>
</head>
<body>
<input type="file" id="file-input" />
<button id="read-button">Read File</button>
<pre id="file-contents"></pre>
</body>
</html>