2

всем привет!

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 прекращает работать.
Что за магия такая? Может кто объяснить??????

5
  • почему вы решили использовать в JS let а в jQuery var? 16 дек 2018 в 21:12
  • а при чём здесь этот вопрос?
    – O.O
    16 дек 2018 в 22:05
  • 1
    Jquery набирал на клаве, где буква t лагала
    – O.O
    16 дек 2018 в 22:07
  • Ну, естественно, русскоязычный комьюнити вежливо промолчал, видимо из-за страха конкуренции. Кривоватое решение проблемы удалось придумать самому, читаю мануал дальше - может найду вариант получше - тогда выложу.
    – O.O
    17 дек 2018 в 0:00
  • Во первых, у вас в примере код, который не относится непосредственно к drag&drop (загрузка файла), что усложняет понимание кода. Во вторых, у вас разный код на js и jquery. На JQ вы отменяете событие ondragover, а на чистом js - нет. 17 дек 2018 в 5:32

1 ответ 1

1

Событие dragover тоже надо отменять, что вы и делаете в примере с jquery, но не делаете в примере без 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>

P.S. Drag&Drop в сниппете будет работать только в режиме редактирования сниппета.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.