Reprint: Use the Readasdataurl method of the FileReader object to read the image file

Article reprinted from: http://blog.okbase.net/jquery2000/archive/1296.html;

The Readasdataurl method of the FileReader object encodes the read file into the data URL. The data URL is a special technique that allows you to embed data (such as a sample) in a Web page without putting it in an external file. The advantage of using the data URL is that you do not need to send an additional HTTP request to the server to obtain additional data, and the disadvantage is that the size of the Web page may become larger. It is suitable for embedding small images, it is not recommended to encode large image files into the data URL to use. Your image file cannot exceed the browser-qualified size, or the image file cannot be read.

Refer to the following example to read an image file using Readasdataurl:

<! DOCTYPE html>
The Readasdataurl method is encoded using BASE-64, the encoded data is started by the data string, followed by the MIME type, and then the Base64 string, followed by a comma is the contents of the encoded image file.
displaying image files using img
If you want the image file to be read directly on the page, you can create a  tag via JavaScript, set the SRC attribute to the data URL, and add the  tag to the DOM, as shown in the following example:
<! DOCTYPE html>
Read some files
Sometimes the file you want to read is too large to read in segments, or just want to read the contents of the file section, you can cut the file, depending on the browser, you can use the following methods:
Webkitslice: Applies to browsers that support the WebKit engine, such as chrome.
Mozslice: Applies to Firefox.
Both methods are passed to the beginning of the tuple index, and the end of the bit-group index, with the index starting at 0. The following program example reads a file by using the Readasbinarystring method of the FileReader object, reading only the third byte of the file to the sixth byte group:
<! DOCTYPE html>

Please note:
Different browsers have different support for HTML 5, which can be performed properly in chrome and not necessarily in other browsers.
Reprint: Use the Readasdataurl method of the FileReader object to read the image file