Обработка файлов через Drag and Drop

Пример кода на JSFiddle

Drag and Drop — возможность захватить мышью элемент и перенести его в нужную область для выполнения действия.

Например, можно просто перетащить файл с компьютера на браузер, и данный файл будет загружен на сайт. Здесь приводится пример получении информации о файле через Drag and Drop без загрузки на сервер.

Шаг 1: Отмена событий по умолчанию

Когда файл из компьютера «перебрасывают» в окно браузера, выполняется событие drop, стандартное действие которого, открыть файл браузером. Сначала надо отменить данное событие по умолчанию.

document.getElementById("drop-area").addEventListener("drop", drop);
document.getElementById("drop-area").addEventListener("dragover", dragover);

// событие при перетаскивании файла в «drop-area»
function drop(e) {
    e.preventDefault();
}

// событие при наведении файла в «drop-area»
function dragover(e) {
    e.preventDefault();
}

Теперь, если файл «бросят» в HTML-элемент #drop-area, то файл не будет открываться браузером, а будет выполняться указанный код.

Метод e.preventDefault() отменяет стандартное действие текущего события.

Шаг 2: Получение файла в JavaScript

Файл «брошен» в указанную область, теперь его надо получить. Сделать это можно через следующий код:

function drop(e) {

    // информация о полученном файле
    var file = e.dataTransfer.files[0];

    file.name; // имя файла
    file.type; // тип файла (например, image/png)
    file.size; // размер файла

}

Пример вывода информации о файле с полным кодом.

var dropArea = document.getElementById("drop-area");
var result = document.getElementById("result");

dropArea.addEventListener("drop", drop);
dropArea.addEventListener("dragover", dragover);
dropArea.addEventListener("dragleave", dragleave);

function drop(e) {
    e.preventDefault();
    var file = e.dataTransfer.files[0];
    
    // вывести информацию о файле
    result.innerHTML = file.name + " <span class='grey'>(" + file.type + " — " + file.size + " байт)</span>";
    this.style.borderColor = "grey";
}

function dragover(e){
    this.style.borderColor = "orange";
    e.preventDefault();
}

function dragleave(e){
    this.style.borderColor = "grey";
    e.preventDefault();
}