html5'in dosya jpi ile api örneği?

Question

Ben harici sürükle birlikte HTML5 dosya API kullanmak n bırak işlevselliği (harici bir dosya sürükleyin belirlenmiş bir nokta üzerine ve içeriğini yakalamak) ve jquery istiyoruz. (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); 
     }; 

Bu çalışıyor: Bir çalışma dışı jquery örnek bulundu. Şimdi bu daha bir jquery-ish yapmak istiyorum ve ben denedim:

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

Ama bu işe yaramazsa, binded olayların hiçbiri tetiklenen olsun görünüyor. Ayrıca, etkinlik adları için "açık" bölümünü kaybetmeye çalıştım ama bu da işe yaramıyor. Burada birileri bir ışık yakabilir mi?

Saygılarımızla, jeroen.

Answer 1

Çözüm basittir.

1. (olaylar atıldı şey, bir hata verdi oldu bu yüzden) (etkinlik atıldı yüzden)
2. this. =>$(this).on önek kaybettin. Benimle

işe yaradı.

Answer 2

Gidon açıklaması sorunu çözer. Burada, bir başkasının bu sorunu çözmek istediği ve daha fazla ayrıntı istediği durumda tam kodlanmış bir örnek. aptalcaydı

// 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>