Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML

ドラッグ＆ドロップでファイルをアップできるHTML5のデモ。
デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。
ソースをDLしてそのまま使うことも可能です。


ドロップするとサムネイルと共にボタンが表示されます。


ボタンを押すとファイルがアップロードされます。

使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。
サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。

関連エントリ

• これは必見のWEBデザインの近未来。HTML5で構築されたサイト45
• HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」
• iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート

---