This example uses the HTML5 File API (tutorial) to let users load an image file client-side with drag and drop. The image file is just shown in the web page, it is not sent to the server.
Just drag a PNG onto the target area to create a bl.ocks.org-style thumbnail.
| body { | |
| background: #393d48; | |
| } | |
| .thumbnail { | |
| width: 230px; | |
| height: 80px; | |
| opacity: 0.8; | |
| background-position: 0% 0%; | |
| transition: ease 750ms background-position; | |
| -webkit-transition: ease 750ms background-position; | |
| -moz-transition: ease 750ms background-position; | |
| -ms-transition: ease 750ms background-position; | |
| -o-transition: ease 750ms background-position; | |
| } | |
| .thumbnail:hover, | |
| .thumbnail:focus { | |
| background-position: 0% 100%; | |
| } | |
| #drop_zone { | |
| margin-left: -115px; | |
| margin-top: -40px; | |
| position: absolute; | |
| top: 250px; | |
| left: 480px; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="HTML5 File API - DnD PNG thumbnail" /> | |
| <meta charset="utf-8"> | |
| <title>HTML5 File API - DnD PNG thumbnail</title> | |
| <link rel="stylesheet" href="index.css"> | |
| </head> | |
| <body> | |
| <div id="drop_zone" class="thumbnail" style="background-image: url(data:image/png;base64,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)"/> | |
| <script> | |
| function handleFileSelect(evt) { | |
| evt.stopPropagation(); | |
| evt.preventDefault(); | |
| var file = evt.dataTransfer.files[0]; // File object. | |
| // thumbnail must be a PNG | |
| if (!file.type.match('image/png')) | |
| return; | |
| var reader = new FileReader(); | |
| // Closure to capture the file information. | |
| reader.onload = (function(theFile) { | |
| return function(e) { | |
| var data = e.target.result; | |
| document.getElementById('drop_zone').setAttribute('style','background-image: url('+data+');'); | |
| }; | |
| })(file); | |
| // Read in the image file as a data URL. | |
| reader.readAsDataURL(file); | |
| } | |
| function handleDragOver(evt) { | |
| evt.stopPropagation(); | |
| evt.preventDefault(); | |
| evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. | |
| } | |
| // Setup the dnd listeners. | |
| var dropZone = document.getElementById('drop_zone'); | |
| dropZone.addEventListener('dragover', handleDragOver, false); | |
| dropZone.addEventListener('drop', handleFileSelect, false); | |
| </script> | |
| </body> | |
| </html> |
