前の記事 ≪:Instagramから写真を取ってきて表示できるjQueryプラグイン「jQuery Spectragra...
次の記事 ≫:2012年8月20日 管理人のブックマーク

ドラッグ&ドロップでファイルをアップできるHTML5のデモ

2012年08月20日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML

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


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


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

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

関連エントリ

関連の記事検索:HTML5, アップロード, Web制作
スポンサード リンク

By.KJ : 2012年08月20日 10:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)