JS HTML

HOW TO READ FILES IN JAVASCRIPT

SIMPLE READ TEXT FILE (A)

01

EMPTY DIV & FILE PICKER <div id="show"></div> <input type="file" value="Pick" id="pick" accept="text/plain" onchange="readFile()"/>

SIMPLE READ TEXT FILE (B)

02

function readFile() {   GET SELECTED FILE   let sFile = document.getElementById   ("pick").files[0];

  READ SELECTED FILE   let reader = new FileReader();   reader.addEventListener("loadend", ()   => { document.getElementById   ("show").innerHTML = reader.result; });   reader.readAsText(sFile); }

SIMPLE READ IMAGE FILE (A)

03

EMPTY IMG & FILE PICKER <img id="show"/> <input type="file" value="Pick" id="pick" accept="image/*" onchange="readFile()"/>

SIMPLE READ IMAGE FILE (B)

04

function readFile() {   GET SELECTED FILE   let sFile = document.getElementById   ("pick").files[0];

  READ SELECTED FILE   let reader = new FileReader();   reader.addEventListener("load", () => {   document.getElementById("show")   .src = reader.result; });      reader.readAsDataURL(selected); }