Use Advanced HTML5 FileReader of

FileReader FileReader is primarily used to target file in memory, and reads the data file. Create a FileReader object through the constructor.

Use Advanced HTML5 FileReader of

This file is read objects in the following ways:

1.readAsText (): read the text file (Txt open files may be used), returns the text string, the default code is UTF-8.

2.readAsBinaryString (): read any type of file. Return binary strings. This method is not used to read the document presented to the user to see, but stored files. Example: After reading the contents of a file, acquires binary data, is transmitted to the background, the background data has been received, then the data is stored.

3.readAsDataURL (): read the data file acquisition period begins with a string, this string is the essence of a DataURL.DataURL the file (which generally refers to the image can be embedded in the document or file format) is embedded the program document. DataURL is converted to a string resource base64 encoding, and content stored directly in the url >> optimized loading speed and efficiency of the site.

4.abort (): Interrupt reading

The target common applications in real-time preview:

Instant: When the user finishes select the picture immediately preview processing >> onchange

Preview: read through the file object readAsDataURL () to complete.

The following is a concrete realization when applying:

·  HTML part

image

· JS part

image

Where to get data, FileReader also provide a complete event model used to capture the state of reading the file.

        onabort: read the file triggers an interrupt films

        onerror: read error is triggered

        onload: When the file is read successfully completed trigger

        onloadend: reading the complete trigger, regardless of success or failure

        onloadstart: trigger at the beginning of reading

        onprogress: read the file during the continuous trigger

To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a front-end full-stack learning buckle qun: 784783012 unpaid share some senior front-end development engineers recorded video (from zero base to project real case), front-end engineers the necessary knowledge. Also receive free learning resources
when the real start learning inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.

Learning the front, we are serious

Guess you like

Origin blog.51cto.com/14284898/2405528