Search code examples
jqueryhtmldrag-and-dropajax-upload

why page is redirected when i drop image on div


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;
    });

});

Solution

  • 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>