javascript 如果没有文件输入，则禁用文件拖放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13082192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable File drag & drop if there isn't a file input
提问by Charles John Thompson III
I think the solution to this is staring me in the face, but I can't seem to find it.
我认为解决这个问题的方法是盯着我的脸，但我似乎找不到它。
So, I'm making a site that has a small file upload section. The upload section will have a place to upload an image for different devices and device orientations (i.e. iPhone, iPad, portrait and landscape). I can easily figure out how to implement the drag & drop on the individual device icons, but if the user misses the drop area, the browser will just navigate to that image on their system. How do I disable drag & drop if there isn't a file input type to receive the dragged file?
所以，我正在制作一个有一个小文件上传部分的网站。上传部分将有一个地方可以为不同的设备和设备方向（即 iPhone、iPad、纵向和横向）上传图像。我可以很容易地弄清楚如何在单个设备图标上实现拖放，但是如果用户错过了拖放区域，浏览器只会导航到他们系统上的那个图像。如果没有文件输入类型来接收拖动的文件，如何禁用拖放？
回答by John Dvorak
This document (documentation for a jQuery file upload plugin) shows how to disable the browser's default action: https://github.com/blueimp/jQuery-File-Upload/wiki/Drop-zone-effects
本文档（jQuery 文件上传插件的文档）展示了如何禁用浏览器的默认操作：https: //github.com/blueimp/jQuery-File-Upload/wiki/Drop-zone-effects
Quoting the document:
引用文件：
If you want to allow specific drop zones but disable the default browser action for file drops on the document, add the following JavaScript code:
如果要允许特定的拖放区域但禁用文档上文件拖放的默认浏览器操作，请添加以下 JavaScript 代码：
$(document).bind('drop dragover', function (e) {
e.preventDefault();
});
Note that preventing the default action for both the "drop" and "dragover" events is required to disable the default browser drop action.
请注意，要禁用默认浏览器放置操作，需要阻止“放置”和“拖动”事件的默认操作。
回答by Pravin Belurkar
This might not be relevant to the topic, but it is just reverse. If you don't want to drag-drop file in input file up-loader, you can use
这可能与主题无关，但正好相反。如果你不想在输入文件上传器中拖放文件，你可以使用
$('body').on('drop', function (e) {
return false;
});
It worked for me in both IE 11 and chrome. Thanks Francois for your similar guidelines
它在 IE 11 和 chrome 中都对我有用。感谢弗朗索瓦的类似指导方针
回答by Luis Castro
the dropzone must be inside the form without any HTML elements:
dropzone 必须在没有任何 HTML 元素的表单内：
<form id="frmdropzone" class="dropzone" action="Save" method="post" enctype="multipart/form-data">
<div class="dropzone-previews"></div>
</form>
回答by Fran?ois Lavigne
To improve on Jan's answer, if you don't want to disable the drag & drop on file input elements:
为了改进 Jan 的回答，如果您不想禁用文件输入元素上的拖放：
$(document).bind("drop dragover", function(e){
if(e.target.type != "file"){
e.preventDefault();
}
});
