はじめに HTML5でファイル操作をやってみます。 ついでに、ドラッグ・アンド・ドロップで、ファイルの選択をしてみます。 ファイル情報取得 初期設定でdragoverとdropイベントを設定します。 dragoverイベントは、ファイルをドラッグして対象領域の上に来た時に発生するイベントです。 イベントキャンセルを行わないと、そのままブラウザにファイルが読み込まれてしまいます。 (アイコンの種類をlinkとしていますが、Chrome以外適用されていない気がします。) dropイベントは、ファイルをドロップした時に発生するイベントです。 イベントキャンセル後、ドロップされたファイルを取得します。 event.originalEvent.dataTransfer.files、JQueryでイベント登録している為 オリジナルのイベントデータが欲しい場合originalEventを指定しなければな
![いまさらHTML5 (FileAPI編) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/727ade48bab40b183bca5ee301f5503155df5e57/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgxJTg0JUUzJTgxJUJFJUUzJTgxJTk1JUUzJTgyJTg5SFRNTDUlMjAlRUYlQkMlODhGaWxlQVBJJUU3JUI3JUE4JUVGJUJDJTg5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iYjZiZmFiOGViNjQ0YzNmMWI1YzI5YmNlZGQxNDk3Yg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG5ha2FnYXdhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02N2RhNDE0MWU0MDJlNGQ5YTExNTYwYzJhZjc2MTFjNg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9b4a0fca2f0c0dcb50f134a81c8826fb)