HTML5 programming example 3: Drag and Drop preview of image text (txt)

<! Doctype HTML> 

Main code parsing

The style part is simple.

Dragover, dragend, and drop are three drag-and-drop events.

Dragover indicates that the drag-and-drop element is moving within the range of the element.

Dragend indicates that the drag-and-drop operation is complete.

Drop indicates that other elements are dragged to the base element.

The code first listens to these events, cancels the default behavior of the browser, and then uses the file and filereader in html5.

If the file is an image, use the readasdataurl method of filereader to read the image as a dataurl string and store it in the memory and display it in the div.

If the file is TXT text, use the readastext method of filereader to read the file as text (in UTF-8 format by default), put it in memory, and then display it in Div.