html5 的文件 api 示例与 jquery? [英] html5's file api example with jquery?
问题描述
我想使用 html5 的文件 api,结合外部拖放功能(将外部文件拖到指定位置并捕获其内容)和 jquery.我找到了一个非 jquery 示例:(html5 demo: file api)
I would like to use html5's file api, in combination with the external drag n drop functionality (drag an external file onto a designated spot and capture its contents) and jquery. I found a working non-jquery example: (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,我试过:
This works fine. Now I would like to make this more a jquery-ish and I tried:
$("#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"部分,但这也不起作用.希望这里有人能发光?
But that doesn't work, none of the binded events seems to get triggered. I also tried to loose the "on" part for the eventnames but that also doesn't work. Hopefully somebody here can shine a light?
问候,杰伦.
推荐答案
解决方案很简单.
- 去掉
on
前缀(这就是没有抛出事件的原因) this.
=>$(this).
(这就是为什么在抛出事件时什么也没有发生,它给出了错误).
- Lose the
on
prefix (that's why no events were thrown) this.
=>$(this).
(that's why when events were thrown nothing happened, it gave an error).
对我来说它奏效了.
这篇关于html5 的文件 api 示例与 jquery?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!