HTML5でファイルのドラッグ＆ドロップ : まだプログラマーですが何か？

HTML5 の File API を使った、OS からウェブ画面へのファイルドラッグ＆ドロップを実現する方法を紹介します。 まず、何も準備しないでウェブ画面へファイルをドラッグ＆ドロップすると、デフォルト挙動によって、そのファイルがブラウザで開かれます。例えば画像ファイルをウェブ画面にドラッグ＆ドロップすると、その画像ファイルがブラウザ内で開かれて表示されます。 ドラッグ＆ドロップを実現するには、まずブラウザのこのデフォルト挙動を上書きして、別の挙動にするよう指定する必要があります。そのためにファイルドロップのエリア（<div>）への drop イベントに対して、preventDefault(); を指定しておく必要があります。これでファイルをドロップしてもブラウザでは開かなくなります。 また、ドロップイベントのパラメータである event の event.dataTransfer.fil