Показать информацию о файле через Drag and Drop

$('#drop').on('drop', drop);         // событие при перетаскивании объекта
$('#drop').on('dragover', dragover); // событие при наведении на объект
$('#drop').on('dragleave', dragleave);

function drop(e) {
    e.preventDefault();
    
    // информация о перетаксиваемом файле
    var file = e.originalEvent.dataTransfer.files[0];
    
    // вывести информацию о файле
    $('#result').html(file.name + " <span>(" + file.type + " — " + file.size + " байт)</span>");
    $(this).css('border-color', 'grey');
}

// отмена события по умолчанию
function dragover(e) {
    e.preventDefault();
    $(this).css('border-color', 'orange');
}

function dragleave(e) {
    e.preventDefault();
    $(this).css('border-color', 'grey');
}

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

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

Код на JavaScript