html5 drag and drop file upload example

This article mainly introduces the object and event information related to the drag-and-drop operation, but does not involve too many source code demonstrations.A simple exampleIn the HTML5 to implement drag-and-drop operation, relative to the previous implementation through

Tag: Ack OLE src fix stop star head Tran dateLet's start by introducing the events generated during the HTML5 drag process:If a is dragged inside B, the1. A will trigger ondragstart, Ondrag, Ondragend, respectively, drag and drop to start, drag and

In the HTML5 to implement drag-and-drop operation, relative to the previous implementation through the mouse operation, it is much simpler, data security is more secure. It takes only a few steps to do this. Adds an attribute to the dragged element draggable , if it is a file

, allowing the set value to be none, copy, link, Move.The actual visual effect represented by the DropEffect property must be within the scope of the allowed visual effects represented by the Effectallowed propertyRules:If the Effectallowed property is set to None. Drag and drop elements are not allowed.If the DropEffect property is set to none, it is not allowed to be dragged into the target Element.If the

Original link: http://www.cnblogs.com/zhenwen/p/5855107.htmlHTML5 provides native drag-and-drop JavaScript APIs that are easy to use.Compatibility:For PC-side browsers, Firefox, Chrome, Safari support is good, and IE and Edge browser Some features are not supported, such as IE10 and IE11, Edge for Datatransfer.setdata (format,data), only defined " Text "and" URL "are two valid data types. The

Drag-and-drop is a common feature of dragging objects to another location, in HTML5, where drag and drop is part of the standard and any element can be dragged and dropped.1. HTML5 Drag

HTML5 's drag and drop is a very good feature, more examples of online use such as Http://html5demos.com/drag, but the majority of these examples are not practical, this article will be a bit of a useful example, through the drag

that is read, and if it is a picture, returns the picture data in base64 format Cases:var fd=New FileReader (); Fd.readasdataurl (fs[0]); // the collection that FS obtains for Event.dataTransfer.files fd.onload=function() { alert (this. Result) } A complete example (drag-and-drop upload preview):H

Drag event (DragStart--drag--Dragend)When you press the mouse to start drag an object that can be dragged, trigger the DragStart event, if the element is not draggable, there will be a non-draggable icon, a slash inside the ring DragStart event triggered, when you drag the element, it will continue to trigger the

File object list Flielist objectvar dt=e.datatransfer;//as DataTransfer property for drag-and-drop eventsdt.effectallowed= ' Copy ';Dt.setdata (' Text/plain ', ' hello ');Dt.setdragimage (DRAGICOM,-10,-10);}); 3. Drag and drop upload