javascript - Disable File drag & drop if there isn't a file input - Stack Overflow

admin管理员组

文章数量:1221920

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?

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?

• javascript
• file-upload
• drag-and-drop
• fileapi

Share Improve this question Follow asked Oct 26, 2012 at 6:55 CJT3CJT3 2,90877 gold badges3333 silver badges4545 bronze badges 1

• listen to drag&drop events on the whole page, reject and prevent default? – John Dvorak Commented Oct 26, 2012 at 7:08

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 15

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

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:

$(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.

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

the dropzone must be inside the form without any HTML elements:

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

To improve on Jan's answer, if you don't want to disable the drag & drop on file input elements:

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

本文标签： javascriptDisable File drag amp drop if there isn39t a file inputStack Overflow