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

What are the knowledge points of this article "HTML5 file drag and drop API knowledge points?" most people do not understand, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "HTML5 file drag and drop API knowledge points" article.

1. File API

HTML5 provides an API for manipulating files, and this API makes it easy to access the local file system from a Web page. The file object is mainly used to interface with FileReader in the file API. In HTML 5, the file object represents a file on the client computer that has two properties, and the name attribute represents the file name (excluding the path) the lastModifiedDate property represents the last modified date of the file.

In HTML 5, you can use the FileReader interface to read files into memory and read data from files. The FileReader interface has four methods, three of which are used to read the file and the other to interrupt the reading process.

These four methods and their parameters and functions are listed in the following table. It is important to note that whether the read succeeds or fails, the result does not return the read result, which is stored in the result property.

The method of leReader API:

┏━┳━┳━┓

┃ method name ┃ parameter ┃ description ┃

┣━╋━╋━┫

┃ readAsBinaryString ┃ file ┃ reads the file as a binary code ┃

┣━╋━╋━┫

┃ rcadAsTcxt ┃ file, [encoding] ┃ reads the file as text ┃

┣━╋━╋━┫

┃ readAsDataURL ┃ file ┃ reads the file as DataURL ┃

┣━╋━╋━┫

┃ abort ┃ (none) ┃ interrupt read operation ┃

┗━┻━┻━┛

Port readAsBinaryString: this method reads the file as a binary string and transfers the string to the back end, which allows the back end to store the file.

RcadAsText: this method has two parameters, the second of which is the encoding of the text, and the default value is UTF-8. Read the file as text, and the result is this text.

Port readAsDataURL: this method reads the file as a string of DataURL strings. (this method usually reads images and files in HTML and other formats directly into the page in the form of an URL address in a special format.)

In addition to the above methods, the FileReader interface contains events that capture the status of the file when it is read, as shown in the following table.

Events for the FileReader interface:

┏━┳━┓

┃ event ┃ description ┃

┣━╋━┫

┃ is triggered when ┃ onabon ┃ data read is interrupted

┣━╋━┫

┃ is triggered when an error occurs in reading ┃ onerror ┃ data

┣━╋━┫

┃ is triggered at the beginning of ┃ onloadstart ┃ data read

┣━╋━┫

┃ in ┃ onprogress ┃ data reading

┣━╋━┫

┃ is triggered when ┃ onload ┃ data read completes successfully

┣━╋━┫

Triggered when ┃ onloadend ┃ data read completes, regardless of success or failure of ┃

┗━┻━┛

2. Drag and drop API

HTML 5 provides API that supports drag-and-drop operations. Before HTML 5, we could use mousedown, mousemove, and mouseup to implement drag-and-drop operations, but these events only support drag-and-drop within the browser, while HTML 5 can support data dragging between browsers and other applications.

Steps to implement file drag and drop in HTML5:

1) the draggable attribute of the object element to be dragged and dropped is set to true (draggable=-true -), so that the element can be dragged and dropped. In addition, drag and drop img elements and an elements are allowed by default (href must be specified)

2) write event handling code related to drag and drop. Drag-and-drop related events are shown in the following table.

Events related to drag and drop:

┏━┳━┳━┓

┃ event ┃ the element ┃ that produces the event describes ┃

┣━╋━╋━┫

┃ dragstart ┃ drag-and-drop element ┃ starts drag-and-drop operation ┃

┣━╋━╋━┫

┃ drag ┃ elements dragged and dropped ┃ ┃ during drag-and-drop

┣━╋━╋━┫

The element ┃ that the mouse passed over during the drag-and-drop process of ┃ dragcnter ┃ begins to enter the ┃ in the circle of this element.

┣━╋━╋━┫

The element ┃ that you mouse over during ┃ dragover ┃ drag and drop is moving the ┃ within the circle of this element.

┣━╋━╋━┫

The element ┃ that the mouse passed over during the ┃ dragleave ┃ drag and drop leaves the scope ┃ of this element.

┣━╋━╋━┫

┃ drop ┃ drag-and-drop target element ┃ has other elements that have been dragged and dropped into this element ┃

┣━╋━╋━┫

┃ dragend ┃ drag-and-drop object elements ┃ drag-and-drop operation ends ┃

┗━┻━┻━┛

In addition, there is a DataTransfer object in the drag-and-drop API, which is used to hold the data you want to carry when you drag and drop. We can use the object's files [0] property to refer to the file that was dragged into the file preview area. Var file-ev. DataTransfer. Files [O]

The above is about the content of this article on "what are the knowledge points of dragging and dropping API in HTML5 files?" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge content, please pay attention to 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.