HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード | Soraxism
社内で使用するファイルアップローダを作ることになりました。 実装段階では従来の「ファイルを選択」ボタンを押して、ダイアログ内でファイルを選択する仕様だったのですが、操作を見ているとかなり深い階層のファイルをアップロードするようなこともあるようで、階層たどっていくのが手間なように感じたため、ドラッグ&ドロップでファイルをアップロードできるように仕様を変更しました。 実装手順をメモとして残しておきます。 仕様、完成図 まずは完成図から。 仕様は、 ドラッグ&ドロップでファイルをアップロード 従来の「ファイルを選択」ボタンからでも可 複数ファイルに対応 という感じにしてみました。 htmlの内容 <div id="drag-area"> <p>アップロードするファイルをドロップ</p> <p>または</p> <div class="btn-group"> <input type="file" m
HTML5 ドラッグ&ドロップでファイルをアップロード
--- プログラム修正しました (2014/03/30) ご報告ありがとうございました --- HTML5 のドラッグ＆ドロップ API と jQuery.ajax() を使って、 ブラウザ上にドラッグ＆ドロップしたファイルをサーバへアップロードする方法です。 ソースは GitHub へ上げました。 https://github.com/yokano/dnd_file_upload 以下の流れで実現出来ます。 dropzone にファイルがドロップされる drop イベントが発生する イベントオブジェクトの dataTransfer からファイルを取得する FormData を作成してファイルを追加する Ajax でファイルを送信する <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ドラッグ＆ドロップでファイルアップ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
