This is a jQuery plugin that is wrapper library of Drag and Drop API.

jquery.filedrop.js

;(function(global, $) {
    "use strict";

    /**
     * 呼び出し元のjQueryオブジェクトをファイルドロップ可能にする
     * @param  {Object} opt 設定ファイル
     * @return {this} 呼び出し元のjQueryオブジェクト
     */
    $.fn.fileDrop = function(opt) {

        // FileReaderに対応していない場合は例外を投げて終了
        if ( global.FileReader === undefined ) {
            throw new TypeError("This browser is not support FileReader.");
        }

        var defaults = {
                dragEnter: function() {},
                dragLeave: function() {},
                drop:      function() {},
                dropEach:  function() {}
            },
            config = $.extend(defaults, opt),
            util = {};

        /**
         * ブラウザのデフォルトイベントをキャンセルする
         * @namespace util
         * @method stop
         * @param {Event} e イベントオブジェクト
         * @return なし
         */
        util.stop = function(e) {
            e.preventDefault();
            e.stopPropagation();
        };

        return $(this).each(function($el) {
            var $droppable = $(this);

            $droppable.on({
                // dragoverイベントはキャンセル
                "dragover": util.stop,

                // デフォルトイベントをキャンセルしてdragEnterを呼び出し
                "dragenter": function(e) {
                    util.stop(e);
                    config.dragEnter.call($droppable, e);
                },

                // デフォルトイベントをキャンセルしてdragLeaveを呼び出し
                "dragleave": function(e) {
                    util.stop(e);
                    config.dragLeave.call($droppable, e);
                },

                // デフォルトイベントをキャンセルしてdragを呼び出し
                // 取得したファイル1つごとにdropEachイベントを呼び出し
                "drop": function(e) {
                    util.stop(e);

                    // filesはargumentsのようなオブジェクトなので配列に変換
                    var tmp = e.originalEvent.dataTransfer.files,
                        files = Array.prototype.slice.call(tmp, 0, tmp.length);

                    config.drop.call($droppable, files);

                    files.forEach(function(file) {
                        var reader = new FileReader();

                        $(reader).one('load', function(e) {
                            // dropEachイベントを呼び出し
                            config.dropEach.call($droppable, file, e.currentTarget.result);
                        });
                        reader.readAsText(file);
                    });
                }
            });

        });
    };
}(this, jQuery));

usage.md

usage

apply plugin

$("#dropabe-element").fileDrop();

options

dragEnter

dragEnter: function(e) { /* do something */ }

dragEnter is a usual function except for canceled browser default behavior.

default: function(){};

dragLeave

dragLeave: function(e) { /* do something */ }

dragLeave is a usual function except for canceled browser default behavior.

default: function(){};

drop

drop: function(files) { /* do something */ }

When dropped file at target element, jquery.filedrop.js call "Drop" function.

The first argument is Array of File object.
Notice: It is not FileList object because Array of File object is more convenient than FileList object.

default: function(){};

dropEach

dropEach: function(file, valueOfFile) { /* do something */ }

When dropped file at target element, jquery.filedrop.js call "dropEach" function for each of dropped files.
This function uses FileReader interface in background.

The first argument is File object.
If you dropped many files, this argument is equal to one of them.

The second argument is String of dropped file. Even if you dropped image file, directory, and other not readable files, this argument value is String of file.

default: function(){};