Edit Question - KnowledgeHub

Title Body

I would like to use html5's file api, in combination with the external drag n drop functionality (drag an external file onto a designated spot and capture its contents) and jquery. I found a working non-jquery example: ( html5 demo: file api ) var drop = document.getElementById('drop'); drop.ondragover = function () {this.className = 'focus'; return false;}; drop.ondragend = function () { this.className = ''; return false; }; drop.ondrop=function(e) { this.className = ''; e.preventDefault(); var file = e.dataTransfer.files[0]; var reader = new FileReader(); reader.onload = function (evt) { console.log(evt.target.result); } reader.readAsText(file); }; This works fine. Now I would like to make this more a jquery-ish and I tried: $("#drop").bind('ondragover',function() {this.addClass('focus'); return false;}) .bind("ondragend",function () { this.removeClass('focus'); return false;}) .bind("ondrop",function(e) { this.removeClass("focus"); e.preventDefault(); var file = e.dataTransfer.files[0]; var reader = new FileReader(); reader.onload = function (evt) { console.log(evt.target.result); } reader.readAsText(file); }); But that doesn't work, none of the binded events seems to get triggered. I also tried to loose the "on" part for the eventnames but that also doesn't work. Hopefully somebody here can shine a light? regards, jeroen.

Tags (comma-separated) Cancel