Hello!

let maxFileSize = 1000000; // максимальный размер файла - 1 мб. let dropZoneNew = document.getElementById('dropZone'); //получили нужный элемент //добавляем класс hover при наведении dropZoneNew.addEventListener('dragover', plug => { dropZoneNew.classList.add('hover'); }); // удаляем класс ховер dropZoneNew.addEventListener('dragleave', plug => { dropZoneNew.classList.remove('hover'); }); dropZoneNew.addEventListener('drop', event => { //предотвращаем поведение по умолчанию event.preventDefault(); dropZoneNew.classList.remove('hover'); dropZoneNew.classList.add('drop'); //получили файл: let file = event.dataTransfer.files[0]; //check file size if (file.size > maxFileSize) { dropZone.text('Файл слишком большой!'); dropZone.addClass('error'); return false; } //делаем объект FormData formData = new FormData(); formData.append('file', file); //Запрос var xhr = new XMLHttpRequest(); xhr.onreadystatechange = stateChange; xhr.open('POST', '/drop/upload.php'); xhr.setRequestHeader('any header could be here', file.name); xhr.send(formData); }); function stateChange(event) { if (event.target.readyState == 4) { if (event.target.status == 200) { dropZone.text('Загрузка успешно завершена!'); } else { dropZone.text('Произошла ошибка!'); dropZone.addClass('error'); } } } 
 #dropZone { border: 1px dotted black; padding: 32px; text-align: center; } 
 <form id="form"> <div id="dropZone"> Для загрузки, перетащите файл сюда. </div> </form>


In theory, everything should work, but for some reason, when I drop a picture on the drop-zone, the standard behavior is turned on and the picture simply opens in the browser.


An interesting point is that everything works on JQuery:

 var dropZone = $('#dropZone'), maxFileSize = 1000000; // максимальный размер фалйа - 1 мб. // Добавляем класс hover при наведении dropZone[0].ondragover = function() { dropZone.addClass('hover'); return false; }; // Убираем класс hover dropZone[0].ondragleave = function() { dropZone.removeClass('hover'); return false; }; // Обрабатываем событие Drop dropZone[0].ondrop = event => { event.preventDefault(); dropZone.removeClass('hover'); dropZone.addClass('drop'); var file = event.dataTransfer.files[0]; // Проверяем размер файла if (file.size > maxFileSize) { dropZone.text('Файл слишком большой!'); dropZone.addClass('error'); return false; } //Making form data formData = new FormData(); formData.append('file', file); // Создаем запрос var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', uploadProgress, false); xhr.onreadystatechange = stateChange; xhr.open('POST', '/drop/upload.php'); xhr.setRequestHeader('X-FILE-NAME', file.name); xhr.send(formData); }; // Пост обрабочик function stateChange(event) { if (event.target.readyState == 4) { if (event.target.status == 200) { dropZone.text('Загрузка успешно завершена!'); } else { dropZone.text('Произошла ошибка!'); dropZone.addClass('error'); } } } 
 #dropZone { border: 1px dotted black; padding: 32px; text-align: center; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <div id="dropZone"> Для загрузки, перетащите файл сюда. </div> </form>

Even more curious that if you remove:

 dropZone[0].ondragover = function() { dropZone.addClass('hover'); return false; };


That and on jQuery stops working.
What kind of magic is this? Can anyone explain ??????

  • Why did you decide to use var in JS let and in jQuery? - Pavel Igorevich
  • and what does this question have to do with it? - OO
  • Jquery scored on the clave, where the letter t lagala - OO
  • Well, of course, the Russian-speaking community politely kept silent, apparently because of the fear of competition. It was possible to come up with a crooked solution to the problem myself, I read the manual further - I can find a better option - then I'll post it. - OO
  • First, you have in the example code that does not directly relate to drag & drop (file loading), which complicates the understanding of the code. Secondly, you have different js and jquery code. On JQ, you cancel the ondragover event, but not on pure js. - Stepan Kasyanenko

1 answer 1

The dragover event also needs to be canceled, which you do in the jquery example, but not in the example without jquery .

 let maxFileSize = 1000000; // максимальный размер файла - 1 мб. let dropZoneNew = document.getElementById('dropZone'); //получили нужный элемент //добавляем класс hover при наведении dropZoneNew.addEventListener('dragover', event => { event.preventDefault(); dropZoneNew.classList.add('hover'); }); // удаляем класс ховер dropZoneNew.addEventListener('dragleave', event => { dropZoneNew.classList.remove('hover'); }); dropZoneNew.addEventListener('drop', event => { //предотвращаем поведение по умолчанию event.preventDefault(); dropZoneNew.classList.remove('hover'); dropZoneNew.classList.add('drop'); //получили файл: let file = event.dataTransfer.files[0]; //check file size if (file.size > maxFileSize) { dropZone.text('Файл слишком большой!'); dropZone.addClass('error'); return false; } //делаем объект FormData formData = new FormData(); formData.append('file', file); //Запрос var xhr = new XMLHttpRequest(); xhr.onreadystatechange = stateChange; xhr.open('POST', '/drop/upload.php'); xhr.setRequestHeader('any header could be here', file.name); xhr.send(formData); }); function stateChange(event) { if (event.target.readyState == 4) { if (event.target.status == 200) { dropZone.text('Загрузка успешно завершена!'); } else { dropZone.text('Произошла ошибка!'); dropZone.addClass('error'); } } } 
 #dropZone { border: 1px dotted black; padding: 32px; text-align: center; } 
 <form id="form"> <div id="dropZone"> Для загрузки, перетащите файл сюда. </div> </form>

PS Drag & Drop in the snippet will work only in the snippet editing mode.