Hello. There is such code:

$("body").on('dragenter', function(event){ event.preventDefault(); event.stopPropagation(); $(".main_text").html('Отпустите файл'); }); $("body").on('dragleave', function(event){ event.preventDefault(); event.stopPropagation(); $(".main_text").html('Перетащите изображение для загрузки'); }); $("body").on("drop", function(event) { console.log(1); event.preventDefault(); $(".main_text").html('Начало загрузки...'); var file = event.dataTransfer.files[0]; $(".main_text").html(file.name); });

The first two events work, and the drop event simply opens the file, instead of displaying its name. Tell me what am I doing wrong?

    1 answer 1

    He made a crutch, but it works. Instead of all this nonsense add

     <input type="file" class="input_hiden">

    Assign him a style:

     .input_hiden{ position: absolute; z-index: 9999999999999; top: -880%; left: 0px; opacity: 0;}

    I give him the size through js

     $(".input_hiden").css('height', $(window).height()); $(".input_hiden").css('width', $(window).width());

    And everything, you are beautiful! Drag and Drop works, do not forget to add a handler :)