How to read files with JavaScript

Reading method: 1. Use "readAsText(file, encoding)"; 2. Use "readAsDataUrl(file)"; 3. Use "readAsBinaryString(file)"; 4. Use readAsArrayBuffer(file)" .

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

For security and privacy reasons, Web applications cannot directly access files on the user's device. If one or more local files need to be read, this can be achieved by using input file and FileReader. In this article, we will see how it is done through some examples Working.

Reading files

To read files, the [FileReader] class is mainly used.

　The properties owned by this object are: "

"FileReader.error": Read-only, a DOMException, indicating an error that occurred while reading the file.

『FileReader.readyState』: Read-only A number indicating the status of FileReader. The values ​​are as follows:

Constant Name Value Description EMPTY0 No data has been loaded yet LOADING1 Data is being loaded DONE2 All read requests have been completed

「FileReader.result」 : Read-only, the contents of the file. This property is only valid after the read operation has completed, and the format of the data depends on which method was used to initiate the read operation.

「Methods owned by this object:」

readAsText(file, encoding): Read the file in plain text form, and read the The text is saved in the result attribute. The second parameter represents the encoding format.

readAsDataUrl(file): Read the file and save the file in the result attribute in the form of data URI.

readAsBinaryString(file): Read the file and save the file as a string in the result attribute.

readAsArrayBuffer(file): Read the file and save an ArrayBuffer containing the file content in the result attribute.

FileReader.abort(): Abort the read operation. On return, the readyState property is DONE.

"The process of file reading is an asynchronous operation, and three events are provided during this process: progress, error, and load events."

Progress: every other About 50ms, a progress event will be triggered.

error: Triggered when file information cannot be read.

load: Triggered after successful loading.

In the following example, we will use the readAsText and readAsDataURL methods to display the contents of text and image files.

Example 1: Reading a text file

In order to display the file content as text, change needs to be rewritten:

First, we need to make sure there is a file that can be read. If the user cancels or otherwise closes the file selection dialog without selecting a file, we have nothing to read and exit the function.

Then we continue to create a FileReader. The reader's work is asynchronous to avoid blocking the main thread and UI updates, which is very important when reading large files such as videos.

reader emits a 'load' event (for example, similar to an Image object) to tell our file that it has been read.

reader saves the file content in its result attribute. The data in this property depends on the method we use to read the file. In our example, we read the file using the readAsText method, so the result will be a text string.

Example 2: Displaying a locally selected image

Reading the file as a string is not very useful if we want to display an image . FileReader has a readAsDataURL method that reads the file into an encoded string that can be used as the source of the element. The code for this example is basically the same as the previous code, except that we use readAsDataURL to read the file and display the results as an image:

Summary

1) Due to security and privacy reasons, JavaScript cannot directly access local files.

2) You can select a file by using the input type as file and process the file.

3) file input has files attribute with selected files.

4) We can use FileReader to access the contents of the selected file.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to read files with JavaScript. For more information, please follow other related articles on the PHP Chinese website!