HTML5 implements converting uploaded images into base64 encoding for display (code example)

This chapter will introduce you to the HTML5 implementation of converting uploaded images into base64 encoding for display (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First let’s take a closer lookbase64 encoding：

What is base64 encoding?

Base64 is the most common encoding method used to transmit 8Bit byte codes on the Internet. Base64 encoding can be used to transmit longer files in an HTTP environment. Identification information can also be used in URLs (using an improved Base64 encoding for URLs). Because base64 is not afraid of readability, that is, the encoded data will not be directly visible to the naked eye, it has a certain encryption function.

Why should we convert images to base64 encoding?

Convert the image to base64 encoding Mainly to reduce the number of requests on the web page, our website uses the http protocol, and the http protocol is a A stateless connection means that the connection will be disconnected after connection and transmission to save resources. The solution at this time is to reduce http requests as much as possible. At this time, base64 encoding can add the image to the css, so that the image can be downloaded by requesting the css, which reduces the request for the image again.

html5 How to convert uploaded images into base64 encoding for display?

Converting images to base64 requires using an html5 interface: FileReader.readAsDataURL() interface, this interface can convert files into base64 encoding format, and Then display it in the form of data: URL
Ideas:

1. Create three html tags, input is used to upload images, and textarea is used to display base64 code. Because there is a lot of base64 code content, the textarea tag is used, and the p tag is used to display images.
2. Use js to call the API of FileReader.readAsDataURL() of html5, and declare three variables to control image upload, base64 code display and image display.
3.img_upload.addEventListener('change',readFile,false); Add a listening event, and execute the readFile function if the uploaded file changes.
4. The content of the readFile function is to call the interface, convert the image into base64 and then output it.
5. Before performing conversion and output, first determine whether the uploaded file is an image.

The code is as follows:

Look at the rendering:

Summary: The above is how to convert images to base64 in HTML5 You can try to compile all the codes yourself.

The above is the detailed content of HTML5 implements converting uploaded images into base64 encoding for display (code example). For more information, please follow other related articles on the PHP Chinese website!