HTML5 drag files to the target area to upload files

Drag this HTML5 API on the PC side of the support rate is still pretty high, there are 99.97%

;

This API has two drag events for "dragged element" and "drop target area"

Dragged elements:

##1.  dragstart   这个事件触发在用户按下鼠标开始拖动这个元素或者文本选中的时候##2. drag   当用户拖动一个元素或者文本时候, 随时都会触发的事件.##3. dragend  发生在用户释放鼠标或者按了ESC键的时候触发### 对应的支持一些属性和方法, 详细的请看  

Drop target Area

# 1. drapenter  发生在一个元素或者一个文本进入目标区域时候发生# 2. drapover   触发drapenter 以后随即触发dragover , 只要拖动的元素在目标区域移动就会触发,这个事件会持续触发. (个人的理解是,先有了进入目标区域,然后在须发drapver);# 3. drapleave  跟drapenter对应的就是离开这个目标区域触发的事件.

# 4. Drop releases the mouse trigger event in the target area. (Special attention here, this is the drop!!! not drap);

It is also important to note that the DragOver and drop events trigger the browser's default event. For example, if you drag a picture or text, the browser opens a new window. A drag event will have a property called. "" DataTransfer "", this property exists when the event is dragged and dropped. The DataTransfer object has a SetData (format, data) (the first parameter is the datatype, where IE defines only two valid data types: "Text" and "URL"; the second argument is a string that represents the data to be passed.) ) and GetData (format) (in the drop event, call the GetData () function for the drop target to get the data passed in.

The first parameter is the data type set in the SetData () method. There is also a files property that gets some relevant parameters for the property here to point out that you want to access information about a file, you need to: Event.datatransfer.files[0]. See figure in detail.

The following is a simple demo based on what you see.

<!    DOCTYPE html>

In addition to more detailed information, you can view the https://www.cnblogs.com/libin-1/p/5857714.html

HTML5 drag files to the target area to upload files