Ví dụ về tệp api của html5 với jquery?

Question

Tôi muốn sử dụng tệp api của html5, kết hợp với chức năng kéo thả n bên ngoài (kéo tệp ngoài vào một vị trí được chỉ định và nắm bắt nội dung của nó) và jquery. Tôi đã tìm thấy ví dụ không phải là câu hỏi làm việc: (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); 
     }; 

Điều này làm việc tốt. Bây giờ tôi muốn làm điều này thêm một jquery-ish và tôi đã thử:

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

Nhưng điều đó không có tác dụng, không có sự kiện ràng buộc nào dường như được kích hoạt. Tôi cũng đã cố gắng để mất phần "trên" cho các tên sự kiện nhưng điều đó cũng không hoạt động. Hy vọng rằng ai đó ở đây có thể tỏa sáng một ánh sáng?

liên quan, lỗ.

Answer 1

Giải pháp rất đơn giản.

1. Thua tiền tố on (đó là lý do tại sao có sự kiện nào được ném)
2. this. =>$(this). (đó là lý do tại sao khi sự kiện này được ném chuyện gì xảy ra, nó đưa ra một lỗi).

Với tôi nó đã hoạt động.

Answer 2

Mô tả của Gidon giải quyết được sự cố. Dưới đây là một ví dụ được mã hóa đầy đủ trong trường hợp ai đó đang tìm cách giải quyết vấn đề này và muốn biết thêm chi tiết.

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