How to get the contents of .txt file through FileReader in JS

JS obtains the .txt file content through FileReader

Read .txt file method

JS: FileReader() reads files

Let's start with a practical example
Reading txt files
Reading image files

JS obtains the .txt file content through FileReader

Recently, I have been dealing with a requirement to parse .txt files through js to do some processing. Here is a summary.

Read .txt file method

var reader = new FileReader();
var fileUploader = document.getElementById("fileUploader"); //Get the input box id to get the file information reader.readAsText(fileUploader.files[0], "utf-8"); //Set the encoding reader.onload = function() { undefined
data.trim().split('\n').forEach(function(v, i){undefined
window['str' + (i+1)] = v
}
}

v is the content of each line of text in .txt
i is the line number in .txt

There is no direct method to get the total number of lines in a .txt file, so I use a loop to handle it here:

var count =0;
data.trim().split('\n').forEach(function(v, i){undefined
count++;
})

JS: FileReader() reads files

The FileReader object allows a Web application to asynchronously read the contents of a file (or raw data buffer) stored on the user's computer, using a File or Blob object to specify the file or data to read.

property:

FileReader.error indicates an error occurred while reading a file
FileReader.readyState
The result read FilerReader.result

Let's start with a practical example

index.html is as follows

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FileReader</title>
</head>
<body>
<input id="input" type="file">
</body>
</html>

demo.txt is as follows

This is a demo test
hello world

Reading txt files

<script>
  const input = document.querySelector('input[type=file]')
  input.addEventListener('change', ()=>{
    const reader = new FileReader()
    reader.readAsText(input.files[0],'utf8') // input.files[0] is the first file reader.onload = ()=>{
      document.body.innerHTML += reader.result // reader.result is the result}
  }, false)
  </script>

Reading image files

<script>
  const input = document.querySelector('input[type=file]')
  input.addEventListener('change', ()=>{
    console.log( input.files )
    const reader = new FileReader()
    reader.readAsDataURL(input.files[0]) // input.files[0] is the first file reader.onload = ()=>{
      const img = new Image()
      img.src = reader.result
      document.body.appendChild(img) // reader.result is the result of the acquisition}
  }, false)
  </script>

Examples

import java.io.*;
public class FileRead {
    public static void main(String args[]) throws IOException {
        File file = new File("Hello1.txt");
        // Create a file file.createNewFile();
        // creates a FileWriter Object
        FileWriter writer = new FileWriter(file);
        // Write content to the file writer.write("This\n is\n an\n example\n");
        writer.flush();
        writer.close();
        // Create a FileReader object FileReader fr = new FileReader(file);
        char[] a = new char[50];
        fr.read(a); // Read the contents of the array for (char c : a)
            System.out.print(c); // Print characters one by one fr.close();
    }
}

method

Method Definition	describe
abort():void	Terminates a file read operation
readAsArrayBuffer(file):void	Asynchronously read the file contents byte by byte, and the result is represented by an ArrayBuffer object
readAsBinaryString(file):void	Asynchronously read the file content by bytes, and the result is a binary string of the file
readAsDataURL(file):void	Asynchronously read the file content, and the result is represented by a string in the form of data:url
readAsText(file,encoding):void	Asynchronously read the file content character by character, and the result is expressed as a string

event

Event Name	describe
onabort	Called when a read operation is aborted
onerror	Called when an error occurs in a read operation
onload	Called when the read operation completes successfully
onloadend	Called when the read operation completes, whether successful or unsuccessful.
onloadstart	Called before a read operation is about to begin
onprogress	Called periodically during data reading

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript reads files through the filereader interface
JS+HTML5 FileReader object usage example
JS+HTML5 FileReader implements local preview function before file upload

<<: A brief discussion on the magical uses of CSS pseudo-elements and pseudo-classes

>>: How to use dl(dt,dd), ul(li), ol(li) in HTML

Summary of various postures of MySQL privilege escalation

How to get the contents of .txt file through FileReader in JS

Table of contents

JS obtains the .txt file content through FileReader

Read .txt file method

JS: FileReader() reads files

Let's start with a practical example

Reading txt files

Reading image files

Summary of various postures of MySQL privilege escalation

How to hide and remove scroll bars in HTML

JavaScript function syntax explained

Detailed examples of how to use the box-shadow property in CSS3

Summary of commonly used tags in HTML (must read)

Angular performance optimization: third-party components and lazy loading technology

Build a Scala environment under Linux and write a simple Scala program

Vue local component data sharing Vue.observable() usage

Analysis of the implementation process of three modes of VMWare network adapter

Modify the default color of the input box placeholder text -webkit-input-placeholder method

Recommend

The ultimate solution for playing background music in Firefox browser (Chrome multi-browser compatible)

Detailed View of Hidden Columns in MySQL

Introducing icons by implementing custom components based on Vue

How to write transparent CSS for images using filters

CSS HACK for IE6/IE7/IE8/IE9/FF (summary)

Detailed deployment of Alibaba Cloud Server (graphic tutorial)

MySQL replication advantages and principles explained in detail

Detailed explanation of ActiveMQ deployment method in Linux environment

Tutorial on customizing rpm packages and building yum repositories for Centos

Detailed explanation of COLLATION examples in MySQL that you may have overlooked

How to ensure the overall user experience

Windows keeps remote desktop from being automatically disconnected for a long time

Detailed explanation of the use of the <meta> tag in HTML

CSS to achieve dynamic secondary menu

Installation and configuration tutorial of Linux virtual machine under Windows operating system