画像をinputにドラッグして表示する

IEはダメらしいですが、typeがfileのinputはドラッグ&ドロップでファイルを登録できます。なので、ドロップしたらinputにchangeイベントがおこります。changeイベントが発生したら、FileReaderを使って表示させます。

$(document).on('change', '.img_input', function(e){
    var file = e.target.files[0];
    if(! file.type.match('image.*')) return;

    var reader = new FileReader();
    reader.onload = (function(f) {
        return function(e) {
            $('.img_list').html('<img src="' + e.target.result + '" alt="' + f.name + '"');
        };
    })(file);

    reader.readAsDataURL(file);
});