ドロップされたファイルの情報を表示する。

DEMO

画面にファイルをドロップすると、コンソールにファイル名、最終更新日時、ファイルサイズなどの情報が表示されます。
dragoverイベントとdropイベントのデフォルト動作をとめて、ファイスの情報をコンソールに表示しています。

JavaScript

(function(win, doc) {

    "use strict";
    
    var body = doc.body;
    
    doc.addEventListener("dragover", _preventDefault, false);
    doc.addEventListener("drop", _handleDrop, false);
    
    function _preventDefault(evt) {
        evt.preventDefault();  
    }
    
    function _handleDrop(evt) {
        evt.preventDefault();
        console.log(evt.dataTransfer.files[0]);
    }
    
})(this, document);