Пример API файла html5 с jquery?

Question

Я хотел бы использовать файл api html5 в сочетании с функцией внешнего перетаскивания (перетащите внешний файл в указанное место и захватите его содержимое) и jquery.Я нашел работающий не-jquery пример: ( html5 demo: файл 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-иш, и я попытался:

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

Описание Гидона решает проблему.Вот полностью закодированный пример на тот случай, если кто-то другой хочет решить эту проблему и хочет получить более подробную информацию.

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

Answer 2

Решение простое.

1. Потерять префикс on (поэтому не было выброшено ни одного события)
2. this. => $(this). (поэтому, когда событиябыли брошены, ничего не произошло, это дало ошибку).

У меня это сработало.