-
-
Save cxytomo/4031997 to your computer and use it in GitHub Desktop.
HTML5 Drag and Drop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>HTML5 Drag and Drop</title> | |
| <style> | |
| body { | |
| background-color: #515151; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #holder { | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| #shell { | |
| border: 10px dashed #ccc; | |
| position: absolute; | |
| top: 10%; | |
| left: 10%; | |
| right: 10%; | |
| bottom: 10%; | |
| } | |
| #shell.hover { | |
| border: 10px dashed #333; | |
| } | |
| #tip { | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| right: 0; | |
| height: 30px; | |
| margin-top: -15px; | |
| line-height: 30px; | |
| color: #999; | |
| text-align: center; | |
| } | |
| .hide { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="shell"> | |
| <p id="tip">拖动图片到这里呀亲</p> | |
| </div> | |
| <input id="holder" type="file"> | |
| <script> | |
| var shell = document.getElementById('shell'), | |
| tip = document.getElementById('tip'), | |
| holder = document.getElementById('holder'), | |
| shellWidth = window.getComputedStyle(shell, null).getPropertyValue('width'), | |
| shellHeight = window.getComputedStyle(shell, null).getPropertyValue('height'); | |
| if (typeof window.FileReader === 'undefined') { | |
| holder.style.display = "block"; | |
| shell.style.display = "none"; | |
| } | |
| shell.addEventListener('dragover', function (e) { | |
| this.className = 'hover'; | |
| e.preventDefault(); | |
| }, false); | |
| shell.addEventListener('dragleave', function(e) { | |
| this.className = ''; | |
| e.preventDefault(); | |
| }, false); | |
| shell.addEventListener('dragend', function (e) { | |
| this.className = ''; | |
| e.preventDefault(); | |
| }, false); | |
| shell.addEventListener('drop', function (e) { | |
| this.className = ''; | |
| e.preventDefault(); | |
| var file = e.dataTransfer.files[0], | |
| reader = new FileReader(); | |
| reader.onload = function (event) { | |
| shell.style.background = 'url(' + event.target.result + ') no-repeat center transparent padding-box'; | |
| shell.style.backgroundSize = shellWidth + ' ' + shellHeight; | |
| tip.style.display = 'none'; | |
| }; | |
| reader.readAsDataURL(file); | |
| }, false); | |
| holder.addEventListener('change', function() { | |
| },false); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment