H5 realizes drag and drop uploading files

This time I will bring you H5 to drag and drop to upload files. What are theprecautions for H5 to drag and drop to upload files? The following is a practical case, let’s take a look.

I have implemented quite a lot of functions on the HTML5 PC. I also use drag-and-drop uploading at work. I specially recorded this function.

Trigger events on the drag target (Source element):

ondragstart - Fires when the user starts dragging the element

ondrag - Fires when the element is being dragged

ondragend - Fires when the user completes Triggered after the element is dragged

Events triggered when the target is released:

ondragenter - when the object dragged by the mouse enters its container range This event is triggered when

ondragover - This event is triggered when a dragged object is dragged within the scope of another object's container

ondragleave - When the object being dragged by the mouse leaves its container This event is triggered when within the range

ondrop - During a dragging process, this event is triggered when the mouse button is released

upper code

This function allows you to drag pictures I don’t think the methods in the two ps on the left and right are useful. They can be used as Harbin Beer

The following is the drag and drop upload code. After the back-end PHP obtains $_FILES, it can be started

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use the constraint verification API in H5

##postMessage to achieve cross-domain and cross-window messaging

The above is the detailed content of H5 realizes drag and drop uploading files. For more information, please follow other related articles on the PHP Chinese website!