Shulou(Shulou.com)06/03 Report--

How to use JavaScript to read files, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Read 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, javascript1.8.5 version, Dell G3 computer.

For security and privacy reasons, web applications cannot directly access files on the user's device. If you need to read one or more local files, you can do so by using input file and FileReader. In this article, we will use some examples to see how it works.

Read a file

Read files, mainly using the [FileReader] class.

"the properties that the object has:"

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

"FileReader.readyState": read only numbers that represent the status of the FileReader. The values are as follows:

Constant name value describes that EMPTY0 has not yet loaded any data LOADING1 data is being loaded DONE2 has completed all read requests

"FileReader.result": read-only, the contents of the file. This property is valid only after the read operation is complete, and the format of the data depends on which method is used to initiate the read operation.

"the method owned by this object:"

ReadAsText (file, encoding): reads the file as plain text, and the read text is saved in the result attribute. The second parameter represents the encoding format.

ReadAsDataUrl (file): reads the file and saves it in the result attribute as data URI.

ReadAsBinaryString (file): reads the file and saves the file as a string in the result attribute.

ReadAsArrayBuffer (file): reads the file and saves an ArrayBuffer containing the contents of the file in the how result attribute.

FileReader.abort (): aborts the read operation. When returned, the readyState property is DONE.

"the process of reading a file is an asynchronous operation, in which three events are provided: progress, error, and load events. "

Progress: every 50ms or so, a progress event is triggered.

Error: triggered if the file information cannot be read.

Load: triggered after a successful load.

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

Example 1: reading text files

In order to display the contents of the file as text, change needs to rewrite:

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

Then we go on to create a FileReader. Reader works asynchronously to avoid blocking main threads and UI updates, which is important when reading large files, such as video.

Reader issues a 'load' event (for example, similar to the Image object) to tell us that the file has been read.

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

Example 2: display locally selected pictures

It is not very useful to read the file as a string if we want to display the image. FileReader has a readAsDataURL method that reads a file into an encoded string that can be used as a

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 result as an image:

After reading the above, have you mastered how to use JavaScript to read files? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.