社内で使用するファイルアップローダを作ることになりました。 実装段階では従来の「ファイルを選択」ボタンを押して、ダイアログ内でファイルを選択する仕様だったのですが、操作を見ているとかなり深い階層のファイルをアップロードするようなこともあるようで、階層たどっていくのが手間なように感じたため、ドラッグ&ドロップでファイルをアップロードできるように仕様を変更しました。 実装手順をメモとして残しておきます。 仕様、完成図 まずは完成図から。 仕様は、 ドラッグ&ドロップでファイルをアップロード 従来の「ファイルを選択」ボタンからでも可 複数ファイルに対応 という感じにしてみました。 htmlの内容 <div id="drag-area"> <p>アップロードするファイルをドロップ</p> <p>または</p> <div class="btn-group"> <input type="file" m
![HTML5のFile APIを使用して、ドラッグ&ドロップでファイルをアップロード | Soraxism](https://cdn-ak-scissors.b.st-hatena.com/image/square/7b91135f4cabe70de7fa6f58c4b8ac6199830003/height=288;version=1;width=512/http%3A%2F%2Fsoraxism.com%2Fsoraxism%2Fblog%2Fwp-content%2Fuploads%2F2014%2F10%2Fimage.jpg)