js uses FileReader to read local files or blobs

FileReader reads local files or blobs

1. Use of FileReader
2. FileReader Methods
3. FileReader properties
4. FileReader events

Problems with using FileReader to read local disk files

FileReader reads local files or blobs

The FileReader object provides asynchronous reading of the contents of files stored on the user's computer. Use the File or Blob object to specify the file or data to be read. The FileReader interface provides methods for reading files and an event model that includes the reading results.

1. Use of FileReader

Note: If you need to be compatible with older browsers, you need to check whether the FileReader object exists.

if (window.FileReader) {
 let reader = new FileReader();
} else {
 console.log('Your browser does not support reading files');
}

2. FileReader Methods

method	effect	parameter	Return Value
abort()	Abort read operation	none	none
readAsArrayBuffer()	Read file and Blob content	file/blob	The result property returns the file contents of the ArrayBuffer data object
readAsBinaryString()[deprecated by W3]	Read file and Blob content	file/blob	The result property returns the file contents of the original binary data
readAsDataURL()	Read file and Blob content	file/blob	The result attribute returns the file content in the Base64 string format of data:URL
readAsText()	Read file and Blob content	file/blob	The result property returns the file contents as a string

3. FileReader properties

FileReader.error (read-only): An exception indicating an error that occurred while reading a file
FileReader.readyState (read-only): A number representing the state of the FileReader

value	Status Name	describe
0	EMPTY	No data loaded
1	LOADING	Data loading
2	DONE	Data loading completed

FileReader.result (read-only): The contents of the file are read. This property is valid only after the data is read. The format of the file contents is determined by the reading method.

4. FileReader events

FileReader.onabort : This event is triggered when reading is aborted.
FileReader.onerror : This event is triggered when an error occurs while reading.
FileReader.onload : This event is triggered when reading is completed.
FileReader.onloadstart : This event is triggered when the read operation just starts.
FileReader.onloadend : This event is triggered when the reading is completed (it will be triggered both when it fails and when it succeeds).
FileReader.onprogress : This event is triggered while reading.

Notice:

1. Due to security reasons, FileReader reads files passed in by input or files returned by ajax reading server, and cannot read files in the specified path.

2. FileReader can be used in webworker.

<!DOCTYPE html>
<html class="no-js">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title></title>
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="" />
	</head>
 
	<body>
		<input type="file" id="myFile" />
		<script type="text/javascript">
			if (window.FileReader) {
				var reader = new FileReader();
			} else {
				console.log('Your browser does not support reading files');
			}
			var myFile = document.querySelector('#myFile');
			myFile.onchange = function () {
				var file = myFile.files[0];
				reader.readAsDataURL(file);
				reader.onload = function () {
					var data = reader.result; //file content in base64 format };
                reader.onerror = function(){
                    console.log('Read failed');
                    console.log(reader.error);
                }
			};
		</script>
	</body>
</html>

Problems with using FileReader to read local disk files

Execute a js file (place the js file under the src of the project)

(1) java.net.URL url = TestScriptEngine.class.getClassLoader().getResource("a.js");
(2)//System.out.println(url.getPath().substring(1).replace("%20", " "));
(3)FileReader fileReader = new FileReader(url.getPath());

Runtime

Appear: Exception in thread "main" java.io.FileNotFoundException: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js (The system cannot find the path specified)

If I change url.getPath() to "D:/Eclipse WorkSpace/(java300)ScriptManager/bin/a.js" my local file directory, I can read the file successfully

The value of url.getPath() is: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js But the loading file cannot be found

The problem is "%20". There is a space between Eclipse WorkSpace, and the system automatically replaces it with %20, causing an error during operation.

Do some processing on url.getPath(), replace %20 with " " space by url.getPath().substring(1).replace("%20", " "); the problem is solved

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:

How to get the full path of the file control in js?
JavaScript combined with fileReader to upload pictures
Javascript File and Blob Detailed Explanation
Conversion between file, bolb and base64 images in js image upload

<<: CSS screen size adaptive implementation example

>>: How to use crontab to backup MySQL database regularly in Linux system

Vue implements student management function

js uses FileReader to read local files or blobs

Table of contents

FileReader reads local files or blobs

1. Use of FileReader

2. FileReader Methods

3. FileReader properties

4. FileReader events

Problems with using FileReader to read local disk files

Vue implements student management function

Problems and solutions when replacing Oracle with MySQL

Example code for implementing stacked carousel effect with HTML+CSS+JS

Understanding the CSS transform-origin property

In-depth understanding of the core principles of React Native (Bridge of React Native)

Detailed introduction to logs in Linux system

Detailed tutorial on installing Python 3 virtual environment in Ubuntu 20.04

Is mysql a relational database?

Pitfalls and solutions encountered in MySQL timestamp comparison query

CSS realizes corner cutting + border + projection + content background color gradient effect

Recommend

Detailed use cases of MySql escape

MySQL Community Server 8.0.12 installation and configuration method graphic tutorial

Several practical scenarios for implementing the replace function in MySQL

How to set up virtual directories and configure virtual paths in Tomcat 7.0

How to use provide to implement state management in Vue3

Solve the problem of starting two ports that occupy different ports when docker run

Detailed explanation of Linux LVM logical volume configuration process (create, increase, reduce, delete, uninstall)

Detailed tutorial on using the Prettier Code plugin in vscode

Detailed tutorial on installing and configuring MySql5.7 on Ubuntu 20.04

Use Docker to build a Git image using the clone repository

Example of using Nginx reverse proxy to go-fastdfs

Implementation steps of vue-element-admin to build a backend management system

In-depth understanding of slot-scope in Vue (suitable for beginners)

Docker win ping fails container avoidance guide

How to connect to Alibaba Cloud Ubuntu 16.04 server from local Windows remote desktop