jQueryを使用したhtml5のファイルapiの例？

Question

外部ドラッグアンドドロップ機能（指定された場所に外部ファイルをドラッグしてその内容をキャプチャ）とjqueryと組み合わせて、html5のファイルapiを使用したいと思います。 （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の例を見つけました。今、私は、これはより多くのjqueryのっぽいしたいと思いますし、私が試した：

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

しかし、それは動作しません、バインドさ事象のどれもがトリガ取得するようです。私はまたイベント名の "on"部分を緩めようとしましたが、それもうまくいきません。 ここで誰かが光を照らすことができたらうれしいですか？

については、 がありません。

Answer 1

解決策は簡単です。

1. （イベントは何も起こらなかった投げられたとき、それはエラーを与えた理由です）onプレフィックス（何のイベントがスローされなかった理由です）
2. this. =>$(this).を失います。

私と一緒に働いた。

Answer 2

Gidonの説明はこの問題を解決します。ここでは、誰かがこの問題を解決するために探している場合に完全にコード化された例を示します。愚かだった

// Bindings to HTML; replace these with your components. 
 
var $dropArea = $('#dropArea'); 
 
var $picsHolder = $('#picsHolder'); 
 

 
// Attach our drag and drop handlers. 
 
$dropArea.bind({ 
 
    dragover: function() { 
 
    $(this).addClass('hover'); 
 
    return false; 
 
    }, 
 
    dragend: function() { 
 
    $(this).removeClass('hover'); 
 
    return false; 
 
    }, 
 
    drop: function(e) { 
 
    e = e || window.event; 
 
    e.preventDefault(); 
 

 
    // jQuery wraps the originalEvent, so we try to detect that here... 
 
    e = e.originalEvent || e; 
 
    // Using e.files with fallback because e.dataTransfer is immutable and can't be overridden in Polyfills (http://sandbox.knarly.com/js/dropfiles/).    
 
    var files = (e.files || e.dataTransfer.files); 
 

 
    var $img = $('<img src="" class="uploadPic" title="" alt="" />'); 
 
    for (var i = 0; i < files.length; i++) { 
 
     (function(i) { 
 
     // Loop through our files with a closure so each of our FileReader's are isolated. 
 
     var reader = new FileReader(); 
 
     reader.onload = function(event) { 
 
      var newImg = $img.clone().attr({ 
 
      src: event.target.result, 
 
      title: (files[i].name), 
 
      alt: (files[i].name) 
 
      }); 
 

 
      // Resize large images... 
 
      if (newImg.size() > 480) { 
 
      newImg.width(480); 
 
      } 
 

 
      $picsHolder.append(newImg); 
 
     }; 
 
     reader.readAsDataURL(files[i]); 
 
     })(i); 
 
    } 
 

 
    return false; 
 
    } 
 
});

#dropArea { 
 
    border: 10px dashed; 
 
    border-radius: 10px; 
 
    border-color: gray; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
#dropArea:hover { 
 
    border-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="picsHolder"></div> 
 
<div id="dropArea"></div>