JS HTML

HOW TO READ FILES IN JAVASCRIPT

(quick guide & examples)

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 f = document.getElementById("pick")              .files[0];

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

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 f = document.getElementById("pick")              .files[0];

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