This is just a basic code snippet which shows how you can handle Drag & Drop interactions with a web browser and HTML5. If you select multiple images and drag them into the drop target, then the file names of the dropped images will be logged.
<!DOCTYPE html> <html> <head> <title>HTML5 - Drag & Drop Images</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> #dropTarget { color: #555; border: 1px solid rgb(204, 204, 204); font-family: Sans-Serif; width: 200px; height: 200px; padding: 10px; } </style> </head> <body> <div id="dropTarget">Drop here</div> <script> var dropTargetName = 'dropTarget'; var dropTarget = document.getElementById(dropTargetName); dropTarget.addEventListener('dragenter', doNothing, false); dropTarget.addEventListener('dragover', doNothing, false); dropTarget.addEventListener('drop', dropIt, false); function doNothing(event) { event.preventDefault(); return false; } function dropIt(event) { handleImages(event.dataTransfer.files); event.stopPropagation(); event.preventDefault(); } function handleImages(images) { for (var i = 0, len = images.length; i < len; i++) { var imageFile = images[i]; var fileReader = new FileReader(); fileReader.onload = (function(image) { console.log('File name: ' + image.name); })(imageFile); } } </script> </body> </html> |
Here is an example of how the „handleImages“ function can be adjusted in a way that dropped images will be added to the HTML page:
function handleImages(images) { for (var i = 0, len = images.length; i < len; i++) { var imageFile = images[i]; var fileReader = new FileReader(); fileReader.onload = (function(image) { return function(event) { var img = new Image(); img.src = event.target.result; img.title = image.name; document.body.appendChild(img); }; })(imageFile); fileReader.readAsDataURL(imageFile); } } |
Recommended articles:
Implementing Native Drag and Drop