Created
September 25, 2012 07:16
-
-
Save simkimsia/3780422 to your computer and use it in GitHub Desktop.
dnd html5
This file contains hidden or 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
| <html> | |
| <head> | |
| <style type="text/css"> | |
| body{ | |
| overflow:hidden; | |
| } | |
| #droparea { | |
| width:200px; | |
| height:200px; | |
| } | |
| </style> | |
| <script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script> | |
| </head> | |
| <body> | |
| <div id="droparea" style="border:1px solid black;"></div> | |
| <script type="text/javascript"> | |
| function addToBook(file) { | |
| var fileValid = isFileValid(file); | |
| if (fileValid) { | |
| // step#1 prepare the div to take in the new dnd image | |
| var div = $("<div />"); | |
| // step#2 prepare the filereader onload function on what to do with data url | |
| reader = new FileReader(); | |
| reader.onload = (function (theDiv) { | |
| return function (evt) { | |
| var backgroundimage = "url(" + evt.target.result + ")"; | |
| theDiv.css("background-image", backgroundimage); | |
| }; | |
| }(div)); | |
| // step#3 execute file reader | |
| reader.readAsDataURL(file); | |
| // step#4 or more ... | |
| } | |
| } | |
| /** fileAPI code **/ | |
| function isFileValid(file) { | |
| // this tests to ensure the file type is image/xxxx | |
| return (typeof FileReader !== "undefined" && (/image/i).test(file.type)); | |
| } | |
| function traverseFiles (files) { | |
| if (typeof files !== "undefined") { | |
| for (var i=0, l=files.length; i<l; i++) { | |
| addToBook(files[i]); | |
| } | |
| } | |
| else { | |
| // show no support error message here | |
| alert("No support for the File API in this web browser"); | |
| } | |
| } | |
| $(document).ready(function (){ | |
| var dropArea = document.getElementById("droparea"); | |
| dropArea.addEventListener("dragleave", function (evt) { | |
| var target = evt.target; | |
| if (target && target === dropArea) { | |
| this.className = ""; | |
| } | |
| evt.preventDefault(); | |
| evt.stopPropagation(); | |
| }, false); | |
| dropArea.addEventListener("dragenter", function (evt) { | |
| this.className = "over"; | |
| evt.preventDefault(); | |
| evt.stopPropagation(); | |
| }, false); | |
| dropArea.addEventListener("dragover", function (evt) { | |
| evt.preventDefault(); | |
| evt.stopPropagation(); | |
| }, false); | |
| dropArea.addEventListener("drop", function (evt) { | |
| traverseFiles(evt.dataTransfer.files); | |
| this.className = ""; | |
| evt.preventDefault(); | |
| evt.stopPropagation(); | |
| }, false); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
lines 79 - 119 prepare the standard eventlistener for a drop area
line 62 - 65 is a function called isFileValid where we do file validations in this case, we check if the file is an image
line 66 -72 is a function called traverseFiles where we traverse the dnd files and do something on them iteratively
line 28 -59 is an example of "doing something" to the dnd files. In this example called addToBook, we are going to create a div element which will have its background-image to be the dnd files.
So inside the traverseFiles function, we will run addToBook on every single one of the dnd files.