How to implement drag-and-drop upload with html

This article mainly introduces html how to achieve drag and drop upload, the article introduces in great detail, has a certain reference value, interested friends must read it!

Drag and drop upload

Drag and drop that doesn't support file uploads is a bit low, isn't it? Let's take a look at how to do this in a few simple steps.

First, create a drag and drop area and an optional area to display the contents of the uploaded file.

Drag & Drop an Image DROP HERE Your image to appear here..

Get the dropzone and content regions through their respective ID.

Const dropZone = document.getElementById ('drop-zone'); const content = document.getElementById (' content')

Add a dragover event handler to display the effect of the content to be copied:

DropZone.addEventListener ('dragover', event = > {event.stopPropagation (); event.preventDefault (); event.dataTransfer.dropEffect =' copy';})

Next, we need a drop event listener to handle.

DropZone.addEventListener ('drop', event = > {/ / Get the files const files = event.dataTransfer.files;}); the above is all the content of the article "how html implements drag-and-drop upload". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!