我正在添加一个html5拖放上传程序到我的页面。
当文件被放入上传区域时,一切都很正常。
但是,如果我不小心将文件放到了上传区域之外,浏览器就会像加载新页面一样加载本地文件。
我该如何防止这种行为?
谢谢!
我正在添加一个html5拖放上传程序到我的页面。
当文件被放入上传区域时,一切都很正常。
但是,如果我不小心将文件放到了上传区域之外,浏览器就会像加载新页面一样加载本地文件。
我该如何防止这种行为?
谢谢!
当前回答
试试这个:
document.body.addEventListener('drop', function(e) {
e.preventDefault();
}, false);
其他回答
我使用类选择器为多个上传区域,所以我的解决方案采取了这种不那么纯粹的形式
基于Axel Amthor的答案,依赖jQuery(别名为$)
_stopBrowserFromOpeningDragAndDropPDFFiles = function () {
_preventDND = function(e) {
if (!$(e.target).is($(_uploadBoxSelector))) {
e.preventDefault();
e.dataTransfer.effectAllowed = 'none';
e.dataTransfer.dropEffect = 'none';
}
};
window.addEventListener('dragenter', function (e) {
_preventDND(e);
}, false);
window.addEventListener('dragover', function (e) {
_preventDND(e);
});
window.addEventListener('drop', function (e) {
_preventDND(e);
});
},
下面是一个使用ES6语法的更现代化的版本。
let dropzoneId = 'dropzone' const dragEventHandler = e => { if (e.target.id !== dropzoneId) { e.preventDefault e.dataTransfer.effectAllowed = 'none' e.dataTransfer.dropEffect = 'none' } } // window.addEventListener("dragenter", dragEventHandler, false) // window.addEventListener("dragover", dragEventHandler, false) // window.addEventListener("drop", dragEventHandler, false) ['dragenter', 'dragover', 'drop'].forEach(ev => window.addEventListener(ev, dragEventHandler, false)) <div id="dropzone">...</div>
为了只允许在某些元素上进行拖放,你可以这样做:
window.addEventListener("dragover",function(e){
e = e || event;
console.log(e);
if (e.target.tagName != "INPUT") { // check which element is our target
e.preventDefault();
}
},false);
window.addEventListener("drop",function(e){
e = e || event;
console.log(e);
if (e.target.tagName != "INPUT") { // check which element is our target
e.preventDefault();
}
},false);
默认情况下阻止所有拖放操作可能不是您想要的。至少在某些浏览器中,可以检查拖拽源是否为外部文件。我已经包含了一个函数来检查拖动源是否是这个StackOverflow答案中的外部文件。
修改Digital Plane的答案,你可以这样做:
function isDragSourceExternalFile() {
// Defined here:
// https://stackoverflow.com/a/32044172/395461
}
window.addEventListener("dragover",function(e){
e = e || event;
var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer);
if (IsFile) e.preventDefault();
},false);
window.addEventListener("drop",function(e){
e = e || event;
var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer);
if (IsFile) e.preventDefault();
},false);
jQuery的正确答案将是:
$(document).on({
dragover: function() {
return false;
},
drop: function() {
return false;
}
});
这里返回false将表现为event.preventDefault()和event.stopPropagation()。