why page is redirected when i drop image on div

Question

I am using jquery 1.9. I have problem to implement upload image using drag and drop but when I drop image in div then its going redirect and open image in browser i have implement code in jsfiddle please check and tell me whats problem why its being redirected

this is my following code

$(document).on('ready',function(){
    jQuery.event.props.push('dataTransfer');
    $('.dropuploader').bind('drop', function(e){
        $(this).css({'box-shadow' : 'none', 'border' : '4px dashed rgba(0,0,0,0.2)'});
        alert("hello there");
        return false;
    });
    $('.dropuploader').bind('dragenter', function(e){
        $(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 'border' : '4px dashed #bb2b2b'});
        return false;
    });

});

Answer 1

you have missed ondragover="return false" use following div html

<div class="dropuploader" ondragover="return false">Upload here</div>>

instead of

<div class="dropuploader">Upload here</div>

Answer 2

You also need to add the dragover event to make it work.

For example:

$('.dropuploader').on('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
});

See this jsfiddle: http://jsfiddle.net/jwa3q/

More information about drag events can be found here: https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations