Drag & Drop

IMAGE FILE を Drag & Drop すると画像が描画されます。
環境やブラウザによって様子が違い描画出来ない場合もあるようです。
2015/09/30 ローカル環境で Internet Explore11 と Chrome 45.0.2454.99 で実行を確認しました。
2015/09/30 サーバー環境&Chrome では画像が描画されませんでした。
2015/10/07 Windows10 & Edge の環境では動きませんでした。



【Source Code】
<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>

  1. input タグで指定された type="file" id="selfile" から Drag & Drop された Image File を取得します。
    id="list" は Image を描画する領域です。
    <input type="file" id="selfile" />
    <output id="list"></output>
    
  2. 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]);
    
  3. 入力が終わると 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)