html5的文件api与jquery的例子？

我想使用html5的文件api，结合外部拖放function（将外部文件拖到指定的位置并捕获其内容）和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); }); 

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

问候，jeroen。

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 = $(''); 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; }