Me gustaría usar la API de archivo de html5, en combinación con la funcionalidad externa de arrastrar y soltar (arrastrar un archivo externo a un lugar designado y capturar su contenido) y jquery. Encontré un ejemplo de trabajo que no es jquery: ( demostración html5: 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 un jquery-ish y probé:
$("#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 vinculados parece activarse. También traté de perder la parte "activada" para los nombres de eventos, pero eso tampoco funciona. ¿Ojalá alguien aquí pueda brillar una luz?
saludos, jeron.
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>La solución es sencilla.
on (es por eso que no se lanzaron eventos)this. => $(this). (es por eso que cuando se lanzaban los eventos no pasaba nada, daba error).Conmigo funcionó.