这是我的代码的一部分。
如果我尝试将图像放在块上,preventDefault 不起作用。
jQuery(document).ready(function($) {
$.event.props.push('dataTransfer');
$('#imgDropzone').on({
dragenter: function(e) {
$(this).css('background-color', '#ffd1ff');
},
dragleave: function(e) {
$(this).css('background-color', '');
},
drop: function(e) {
e.stopPropagation();
e.preventDefault();
var file = e.dataTransfer.files[0];
var fileReader = new FileReader();
var el = $(this);
fileReader.onload = (function(file) {
return function(event) {
alert(event.target.result);
};
})(file);
fileReader.readAsDataURL(file);
}
});
});
http://jsfiddle.net/LrmDw/ http://jsfiddle.net/LrmDw/
You need* to prevent default for all the other drag events as well:
see http://jsfiddle.net/LrmDw/2/ http://jsfiddle.net/LrmDw/2/
$('#imgDropzone').on("dragenter dragstart dragend dragleave dragover drag drop", function (e) {
e.preventDefault();
});
解释一下原始 jsfiddle 中不起作用的内容:
当您将文件拖放到拖放区域(或页面中的任何位置)时,浏览器的默认行为是导航离开并尝试解释该文件。如果你丢掉一个普通的
例如,如果有 txt 文件,浏览器将离开 jsfiddle 并显示 txt 文件的内容。这是在 Chrome 中。
顺便说一句,base64 url 并不可取,因为它们会重复数据。只需获取指向文件的 blob 指针并使用它:
var file = e.dataTransfer.files[0];
var src = (window.URL || window.webkitURL).createObjectURL(file);
$("<img>", {src: src}).appendTo("body");
See
http://jsfiddle.net/LrmDw/3/ http://jsfiddle.net/LrmDw/3/
I don't know exactly which ones but I never had to care
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)