html5的文件api示例与jquery？

我想使用html5的文件api，结合外部拖放功能(将外部文件拖放到指定的位置并捕获其内容)和jquery。我发现一个工作的非jquery示例：( 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);  
      };

这工作正常现在我想让这更多的是一个jquery-ish，我试过：

$("#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);  
     });

但是这不行，没有绑定的事件似乎被触发。我也试图松开事件名称的“开”部分，但也不行。
希望有人能在这里发光吗？

问候，
吉荣。

解决方法

解决方案很简单。

>丢掉前缀(这就是为什么没有抛出任何事件)
>这个。 => $(本)。 (这就是为什么当事件没有发生什么事情发生时，它给了一个错误)。

跟我一起工作

原文地址：https://www.jb51.cc/html5/169076.html