Я хотел бы использовать html5 файл api в сочетании с внешней функцией перетаскивания n (перетащить внешний файл на указанное место и захватить его содержимое) и 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);
});
Но это не работает, ни одно из связанных событий не срабатывает. Я также попытался потерять часть "on" для имен событий, но это также не работает. Надеюсь, кто-то здесь может сиять свет?
С уважением, Йерун.