HTML5的使用jQuery文件API的例子吗？ [英] html5's file api example with jquery?

问题描述

我想使用HTML5的文件API，结合外部阻力ñ下降功能（拖动一个外部文件到指定地点，并捕获其内容）和jQuery。我发现了一个工作的非jQuery的例子：（ HTML5演示：文件API ）

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);  
      }; 

这工作正常。现在，我想使这更一个jQuery十岁上下，我尝试：

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);  
     });   

但是，这并不工作，没有绑定的事件似乎被触发。我也试着松了eventnames开的一部分，但也不能正常工作。
希望有人可以在这里照亮一盏灯？

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.

推荐答案

解决的办法很简单。

1. 失去在 preFIX（这就是为什么没有事件被抛出）


2. 这一点。 => $（本）。（这就是为什么当事件被抛出什么都没有发生，它给了错误）。

1. Lose the on prefix (that's why no events were thrown)
2. this. => $(this). (that's why when events were thrown nothing happened, it gave an error).

使用我它的工作。

这篇关于HTML5的使用jQuery文件API的例子吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！