Show FileReader result in html page (not alert)

StackOverflow https://stackoverflow.com/questions/5804401

  •  24-10-2019
  •  | 
  •  

Question

The fileReader function read my txt file from the sdcard and the result will be set in the evt.target.result. I want to write (document.write) this evt.target.result to my html page. What is the best way to show this result on the screen. My filereader function:

function fileReader() 
{

    var reader = new FileReader(); 
    reader.onload = win; 
    reader.onerror= fail; 
    reader.readAsText("/sdcard/mytest.txt");

    function win(evt) 
    { 
        console.log(evt.target.result);
    } 

    function fail(evt) { 
        console.log(evt.target.error.code); 
    } 
};
Was it helpful?

Solution

You would need to have a div or something similar on your HTML page to display the result. There's tons of ways to present and style this, but the simplest would be to include the div in your HTML and reference it by id in your JS

<!DOCTYPE html>
<html>
  <body>
     <!-- Your results will display below -->
    <div id="results"></div>
  </body>
</html>

and in your JS do this

document.getElementById("results").innerHTML = evt.target.result;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top