我正在添加一个html5拖放上传程序到我的页面。

当文件被放入上传区域时,一切都很正常。

但是,如果我不小心将文件放到了上传区域之外,浏览器就会像加载新页面一样加载本地文件。

我该如何防止这种行为?

谢谢!


当前回答

您可以向窗口添加一个事件监听器,在所有拖放事件上调用preventDefault()。 例子:

window.addEventListener("dragover",function(e){
  e = e || event;
  e.preventDefault();
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
},false);

其他回答

下面是一个使用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>

默认情况下阻止所有拖放操作可能不是您想要的。至少在某些浏览器中,可以检查拖拽源是否为外部文件。我已经包含了一个函数来检查拖动源是否是这个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()。

试试这个:

document.body.addEventListener('drop', function(e) {
    e.preventDefault();
}, false);

在反复折腾之后,我发现这是最稳定的解决方案:

var dropzoneId = "dropzone"; window.addEventListener("dragenter", function(e) { if (e.target.id != dropzoneId) { e.preventDefault(); e.dataTransfer.effectAllowed = "none"; e.dataTransfer.dropEffect = "none"; } }, false); window.addEventListener("dragover", function(e) { if (e.target.id != dropzoneId) { e.preventDefault(); e.dataTransfer.effectAllowed = "none"; e.dataTransfer.dropEffect = "none"; } }); window.addEventListener("drop", function(e) { if (e.target.id != dropzoneId) { e.preventDefault(); e.dataTransfer.effectAllowed = "none"; e.dataTransfer.dropEffect = "none"; } }); <div id="dropzone">...</div>

在窗口上无条件地设置effectAllow和dropEffect会导致我的drop zone不再接受任何d-n-d,无论属性是否设置为新的。