Загрузка файлов и изображений с помощью перетаскивания. Javascript (Drag-and-drop)

.

     В этом уроке мы разберем загрузку файлов путем простого перетаскивания файла drag-and-drpop с компьютера на клиентской стороне. Первым делом определим область в форме цветного квадрата, куда перетащив изображение например с рабочего стола компьютера мы тем самым загрузим файл, конечно загружать файл на сервер в этом уроке мы не будем, а просто создадим имитацию загрузки файла, отправив в консоль свойства загружаемого файла, такие как: имя файла, размер, тип.




     Создадим html разметку квадрата, на область которого перетянув по средством drag-and-drop, то есть простым перетаскиванием изображения или какого либо другого файла, мы тем самым получим свойства файла.

     Теперь мы готовы к написанию скрипта который в свою очередь отслеживает два события, одно из которых dragover, другое событие drop. Если вы перед написанием скрипта попробуете перетащить файл в квадратную область которую мы создали в html разметке выше, то браузер откроет это изображение в этой же вкладке, а в адресной строке будет указан путь к файлу на вашем жестком диске, это так называемые действия браузера по умолчанию . Так вот, для того чтобы отменить эти действия браузера мы для каждого обработчика событий dragover и drop, отменим действия по умолчанию прописав в скрипте event.preventDefault. И вот собственно говоря сам скрипт:

     Через объект event.dataTransfer.files — мы получаем доступ к информации о файле. Если вы перетянете файл в квадратную область то в console браузера отобразятся свойства файлов.