всем привет!
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>
По-идее всё должно работать, но, почему-то когда скидываю картинку на drop-зону - включается стандартное поведение и картинка просто открывается в браузере.
Любопытный момент, что на 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>
Ещё более любопытно, что если убрать:
dropZone[0].ondragover = function() {
dropZone.addClass('hover');
return false;
};
То и на JQuery прекращает работать.
Что за магия такая? Может кто объяснить??????