ejemplo de archivo de html5 con jquery?

Question

Me gustaría usar la API del archivo html5, en combinación con la funcionalidad de arrastrar y soltar externa (arrastrar un archivo externo a un lugar designado y capturar su contenido) y jquery. He encontrado un ejemplo de trabajo no 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); 
     }; 

Esto funciona bien. Ahora me gustaría hacer esto más de una jquery-ish y yo intentado:

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

Pero eso no funciona, ninguno de los eventos binded parece que se desencadenó. También traté de perder la parte "activada" para los nombres de los eventos, pero eso tampoco funciona. Esperemos que alguien aquí pueda encender una luz?

respetos, jeroen.

Answer 1

La solución es simple.

1. Pierde el prefijo on (por eso se lanzaron hay eventos)
2. this. =>$(this). (por eso cuando fueron lanzados eventos no pasó nada, se dio un error).

Conmigo funcionó.

Answer 2

La descripción de Gidon resuelve el problema. Aquí hay un ejemplo completamente codificado en caso de que alguien más esté buscando resolver este problema y quiera más detalles.

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