javascript - 如果没有文件输入，则禁用文件拖放

Question

我认为解决这个问题的方法正盯着我看，但我似乎找不到。

所以，我正在制作一个有一个小文件上传部分的网站。上传部分将有一个地方为不同的设备和设备方向（即 iPhone、iPad、纵向和横向）上传图像。我可以很容易地弄清楚如何在单个设备图标上实现拖放，但是如果用户错过了放置区域，浏览器只会导航到他们系统上的那个图像。如果没有文件输入类型来接收拖动的文件，如何禁用拖放？

Answer 1

本文档（jQuery 文件上传插件的文档）展示了如何禁用浏览器的默认操作： https ://github.com/blueimp/jQuery-File-Upload/wiki/Drop-zone-effects

引用文件：

如果您想允许特定拖放区但禁用文档上文件拖放的默认浏览器操作，请添加以下 JavaScript 代码：

$(document).bind('drop dragover', function (e) {
     e.preventDefault();
});

请注意，需要阻止“drop”和“dragover”事件的默认操作才能禁用默认浏览器放置操作。

Answer 2

这可能与主题无关，但只是相反。如果您不想在输入文件上传器中拖放文件，可以使用

$('body').on('drop', function (e) {
     return false;
});

它在 IE 11 和 chrome 中都适用于我。感谢弗朗索瓦提供类似的指导方针

Answer 3

dropzone 必须在没有任何 HTML 元素的表单内：

<form id="frmdropzone" class="dropzone" action="Save" method="post" enctype="multipart/form-data">
       <div class="dropzone-previews"></div>
</form>

Answer 4

为了改进 Jan 的答案，如果您不想禁用文件输入元素上的拖放：

$(document).bind("drop dragover", function(e){
    if(e.target.type != "file"){
        e.preventDefault();
    }
});