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

In this article, the editor introduces in detail "how to use html5's api". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use html5's api" can help you solve your doubts.

The use of API added by HTML5

Window.navigator.onLine checks the network status (false is not connected, true is connected)

Detection of network connection events (browser compatibility issues)

A, 'online': network connection

B, 'offline': network disconnected

Full screen display: controls the full screen display of the browser

(compatibility issues with browsers)

A, webkitRequestFullScreen () method: Google browser to achieve full screen display

B, webkitCancelFullScreen () method: Google browser turns off full-screen display

C, webkitIsFullScreen () method: determine whether Google browser is full screen.

Firefox browser with moz in front of it? For example: mozRequestFullScreen () method

The IE browser is preceded by ms? For example: msRequestFullScreen () method

File reading

1. FileReader object: read local files (file name, path)

2. File object: read the contents of the file

3. DataTransfer object: the object of dragging and dropping files

Browsers do not allow JavaScript to access the file system directly, and use the file field of input form elements to upload files.

Emphasize 1:? multiple means that you can select multiple files when selecting files.

A FileList object is returned for the object to be stored in the files property, and all elements in the object can be accessed by index.

Inside the FileList object (file list) are File objects (file objects). There are three common properties in each File object:

Name: file name? Size: the size of the file in bytes? ??? Type: type of file

Emphasize the 2:onchange event: this event is triggered when the user selects a file that changes.

4. How to use FileReader:

A. Create FileReader object: new FileReader ()

B. use the relevant methods of the object to read the file

ReadAsBinaryString (file): reads a file as binary encoding

ReadAsText (file, [encoding]): reads files into text format

ReadAsDataURL (): reads files as DataURL (usually used to read thumbnails of pictures)

Abort (): interrupt the read operation

C. Access the result property of the object to get the read result

D, common events for file reading:

Onload: triggered when reading is successful

Onloadnd: triggered when the file read is complete (regardless of whether the file read is successful or not)

Onerror: triggered when a file read error

Onabort: triggered when file reading is interrupted

Example:

/ / DOM method to read the contents of the document

Var file = document.querySelector ('input')

Var div = document.querySelector ('div')

File.onchange = function () {/ / triggered when the file selection 'file' control changes

The console.log (file.files) / / files attribute stores a FileList object (the file list object selected by the user

/ / the returned content contains an index, and the returned content is a list of files

For (var iTuno Bandi)

Console.log (file.Files [I] .name)

}

/ / 1. Create a FileReader object

Var reader = new FileReader ()

/ / 2. Read the file to text format

Reader.readAsText (this.files [0]) / / read the contents of the first file in text format

/ / 3. Register the onload event to put the contents of the file into the div

Reader.onload = function () {

Div [XSS _ clean] = this.result / / this represents that reader,this is a DOM object

}

}

After reading this, the article "how to use the api of html5" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself. If you want to know more about the article, please follow the industry information channel.

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.