Drag & Drop

IMAGE FILE を Drag & Drop すると画像が描画されます。
環境やブラウザによって様子が違い描画出来ない場合もあるようです。
2015/09/30 ローカル環境で Internet Explore11 と Chrome 45.0.2454.99 で実行を確認しました。
2015/10/07 Windows10 & Edge の環境では動きませんでした。
2020/05-26 ローカル環境, サーバー環境で Windows10 & Google Chrome で実行を確認しました。
実行の手順です。
1. ローカル環境, サーバー環境で Google Chrome を起動して、Drag & Drop のページ(dragdrop_ex.html)を表示します。
2. ページが表示されたら、エクスプローラを起動して画像ファイル(bmp, jpeg など)をページの中央にドラッグします。
3. ドラッグを許可するプラスマークが表示されます。
4. マウスのボタンを離すと、新規ページに画像ファイルが表示されます。
5. ファイルを選択をクリックして画像ファイルを選択しても描画されません。

dragdrop_ex.html の全ソースコードです。

<html>
<head><meta charset=utf-8"></head>

<body>
<h1>Drag & Drop</h1>

<input type="file" id="selfile" />
<output id="list"></output>

<script type="text/javascript">
function handleFileSelect(evt)
{   var file = evt.target.files;
    var reader = new FileReader();

    // Read in the image file as a data URL.
    reader.readAsDataURL(file[0]);

    reader.onload = (function(theFile)
    {   return function(e)
        {   // Render Image
            var span = document.createElement('span');
            span.innerHTML = ['<img src="', e.target.result,
                              '" title="', escape(theFile.name), '"/>'].join('');
            document.getElementById('list').insertBefore(span, null);
        };
    })(f);
}
</script>

</body>
</html>

input タグで指定された type="file" id="selfile" から Drag & Drop された Image File を取得します。
id="list" は Image を描画する領域です。
<input type="file" id="selfile" /> <output id="list"></output>
Image File が Drag & Drop されると handleFileSelect(evt) 関数が呼ばれます。
var file = evt.target.files; でファイル名を受け取ります。
var reader = new FileReader(); で FileReader を生成して reader.readAsDataURL(file[0]); で画像を入力します。
function handleFileSelect(evt) { var file = evt.target.files; var reader = new FileReader(); // Read in the image file as a data URL. reader.readAsDataURL(file[0]);

入力が終わると reader.onload = (function(theFile) で画像を描画します。
var span = document.createElement('span'); で span を生成して <img> を設定します。

    reader.onload = (function(theFile)
    {   return function(e)
        {   // Render Image
            var span = document.createElement('span');
            span.innerHTML = ['<img src="', e.target.result,
                              '" title="', escape(theFile.name), '"/>'].join('');
            document.getElementById('list').insertBefore(span, null);
        };
    })(f);
}

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)