title: html5's file api example with jquery?
body: <p>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: (<a href="http://html5demos.com/file-api" rel="noreferrer">html5 demo: file api</a>)</p>
  
  <pre><code> 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);  
        }; 
  </code></pre>
  
  <p>This works fine. Now I would like to make this more a jquery-ish and I tried:</p>
  
  <pre><code> $("#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);  
       });   
  </code></pre>
  
  <p>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?</p>
  
  <p>regards,
  jeroen.</p>