1. Like
    Dislike

    You can read files in JavaScript using theFile APIand theFileReaderinterface.
    This works in the browser when the user selects a file via anor drag-and-drop — JavaScriptcannotread arbitrary files from the user’s disk without explicit selection for security reasons123.

    Example: Read a text file in the browser

    Html
    html><htmllang="en"><head><metacharset="UTF-8"><title>Read File in JavaScripttitle><style>body{font-family: Arial, sans-serif; } pre {background:#f4f4f4;padding:10px;border:1pxsolid#ccc; }style>head><body><h2>Select a text file to read:h2><inputtype="file"id="fileInput"accept=".txt"><divid="message">div><preid="fileContent">pre><script>document.getElementById('fileInput').addEventListener('change',function(event) {constfile = event.target.files[0];// Get the first selected fileconstmessage =document.getElementById('message');constoutput =document.getElementById('fileContent');// Clear previous contentmessage.textContent=''; output.textContent='';// Validate file selectionif(!file) { message.textContent='No file selected.'; message.style.color='red';return; }// Optional: Check file typeif(!file.type.startsWith('text')) { message.textContent='Please select a text file.'; message.style.color='red';return; }// Read file contentconstreader =newFileReader(); reader.onload=function(e) { output.textContent= e.target.result;// Display file content}; reader.onerror=function() { message.textContent='Error reading file.'; message.style.color='red'; }; reader.readAsText(file);// Read file as text});script>body>html>

    How it works

    1. File selection— Thelets the user pick a file15.
    2. Access file object—event.target.files[0]returns aFileobject34.
    3. Read file—FileReader.readAsText(file)reads the file asynchronously2.
    4. Handle events—
      • onload→ triggered when reading is complete.
      • onerror→ triggered if reading fails.

    Other reading methods

    FileReadersupports multiple formats2:

    • readAsText(file, encoding)→ Reads as text.
    • readAsDataURL(file)→ Reads as Base64 (useful for images).
    • readAsArrayBuffer(file)→ Reads as binary data.
    • readAsBinaryString(file)→ Reads as binary string (deprecated in some contexts).

    ✅Tip:If you need to read and write files directly (without), look into theFile System Access API— but it’s only supported in Chromium-based browsers5.

    Do you want me to also show youhow to read an image file and display itin the browser? That’s a common next step after reading text files.

    1-Mozilla.org2-Mozilla.org3-Mozilla.org4-Mozilla.org5-Web.dev

    • Work Report
    • Email
    • Rewrite
    • Speech
    • Title Generator
    • Smart Reply
    • Poem
    • Essay
    • Joke
    • Instagram Post
    • X Post
    • Facebook Post
    • Story
    • Cover Letter
    • Resume
    • Job Description
    • Recommendation Letter
    • Resignation Letter
    • Invitation Letter
    • Greeting Message
    • Try more templates
  1. 123

    You can read files from the root folder in JavaScript either by referencing them with a relative path or by letting the user select them via an HTML file input and using the FileReader API.

    Method 1: Accessing via Relative Path

    1. Place your JavaScript file in its folder (e.g.,./JS/main.js) and the target file in the root folder (e.g.,./img/img1.png).

    2. Use..in the file path to go up one directory level until you reach the root folder.

    3. Reference the file path relative to your HTML document or JavaScript file, for example:../../img/img1.png.

    Method 2: Reading via File Input and FileReader API

    1. Add anelement to your HTML to let the user select a file.

    2. In JavaScript, get the file from the input usingdocument.getElementById('fileInput').files[0].

    3. Create aFileReaderobject withlet reader = new FileReader();.

    4. Attach anonloadevent to handle the file content once loaded.

    5. Usereader.readAsText(file)to read text files,reader.readAsArrayBuffer(file)for binary data, orreader.readAsDataURL(file)for images.

    6. Process or display the file content as needed in theonloadcallback.

    Method 3: Using FileSystemDirectoryEntry.getFile()

    1. Obtain aFileSystemDirectoryEntryobject for the root or target directory.

    2. Call.getFile('filename', {}, successCallback, errorCallback)to get aFileSystemFileEntry.

    3. InsidesuccessCallback, call.file()to get aFileobject.

    4. Use aFileReaderto read the file contents as text, binary, or data URL.

    Learn more:
    1 -stackoverflow.com2 -geeksforgeeks.org3 -developer.mozilla.org
    Feedback
  2. Global web icon
    GeeksForGeeks
    http://test.test › javascript › how-to-read-a-local-text-file...

    How to read a local text file using JavaScript? - GeeksforGeeks

    Jul 12, 2025· JavaScript can read local files using the File API, which is supported by most modern browsers. The File API allows JavaScript to read the contents of files chosen by the user, typically …

    • JavaScript can read local files using the File API, which is supported by most modern browsers. The File API allows JavaScript to read the contents of files c…

    See results only from geeksforgeeks.org
  4. Global web icon
    Stack Overflow
    http://test.test › questions

    javascript - How can I read a local text file in the browser? - Stack ...

    Yes, JavaScript can read local files (see FileReader ()), but not automatically: the user has to pass the file or a list of files to the script with an HTML tag, .

    Usage example
    readTextFile("file:http://test.test");
    Local file access with JavaScript - Stack OverflowAug 11, 2019
    Read a file in Node.js - Stack OverflowAug 21, 2013
    html - Reading file contents on the client-side in javascript in ...
    html - How to read text file in JavaScript - Stack Overflow
    See more results
  5. Global web icon
    javaspring.net
    http://test.test › blog › how-to-read-and-write-into-file-using...

    How to Read and Write Files in JavaScript: Step-by-Step Tutorial with ...

    Jan 16, 2026· How to Read and Write Files in JavaScript: Step-by-Step Tutorial with Sample Code Examples File handling—reading from and writing to files—is a fundamental skill in programming, …

  6. Global web icon
    Delft Stack
    http://test.test › howto › javascript › read-text-file-in-javascript

    How to Read Text File in JavaScript - Delft Stack

    Mar 11, 2025· This tutorial demonstrates how to read text files in JavaScript, covering methods for both the browser and Node.js environments. Learn to use the File API, Fetch API, and Node.js fs module …

  7. Global web icon
    CodeForGeek
    http://test.test › read-local-text-file-using-javascript

    How to Read a Local Text File in JavaScript: JS …

    Aug 20, 2025· This is a simple approach to reading files in JavaScript using the FileReader API and its four methods. Whether you are programming in the …

  8. Global web icon
    Mozilla Developer
    http://test.test › en-US › docs › Web › API › FileReader

    FileReader - Web APIs | MDN - MDN Web Docs

    Jun 23, 2025· The FileReader interface lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or …

  9. Global web icon
    web.dev
    http://test.test › articles › read-files

    Read files in JavaScript | Articles | web.dev

    Jun 18, 2010· This example reads a File provided by the user, then converts it to a data URL, and uses that data URL to display the image in an img element. To learn how to verify that the user has …

  10. Global web icon
    JavaScript Tutorial
    http://test.test › web-apis › javascript-filereader

    JavaScript FileReader

    In this tutorial, you'll learn about the JavaScript FileReader API and how to use it to implement the file upload.

  11. Global web icon
    W3docs
    http://test.test › learn-javascript › file-and-filereader

    JavaScript File and FileReader - W3docs

    JavaScript, which is key to client-side scripting, provides strong tools through the File and FileReader interfaces. This guide offers a detailed look at these tools, giving developers the skills to handle files …

  12. Global web icon
    substack.com
    http://test.test › how-to-handle-files-in-javascript

    How to Handle Files in JavaScript: Reading, Uploading, and Converting

    Nov 14, 2024· This article provides a comprehensive guide to file handling in JavaScript. It covers file selection, retrieving file properties, and uploading files to a server. Key concepts such as the …

Content was generated with AI.Learn more

    Microsoft Bing - Search

    Deutsch
    Deutsch
    You can read files in JavaScript using the File API and the FileReader interface. This works in the browser when the user selects a file via an or drag-and-drop — JavaScript cannot read arbitrary files from the user’s disk without explicit selection for security reasons 1 2 3. Example: Read a text file in the browser Read File in JavaScript

    Select a text file to read:

    


 How it works File selection — The  lets the user pick a file 1 5. Access file object — event.target.files[0] returns a File object 3 4. Read file — FileReader.readAsText(file) reads the file asynchronously 2. Handle events — onload → triggered when reading is complete. onerror → triggered if reading fails. Other reading methods FileReader supports multiple formats 2: readAsText(file, encoding) → Reads as text. readAsDataURL(file) → Reads as Base64 (useful for images). readAsArrayBuffer(file) → Reads as binary data. readAsBinaryString(file) → Reads as binary string (deprecated in some contexts). ✅ Tip: If you need to read and write files directly (without ), look into the File System Access API — but it’s only supported in Chromium-based browsers 5. Do you want me to also show you how to read an image file and display it in the browser? That’s a common next step after reading text files. 1-Mozilla.org 2-Mozilla.org 3-Mozilla.org 4-Mozilla.org 5-Web.dev