チップス
jquery php ドラッグ&ドロップで画像アップローダ
jquery+php でドラッグ&ドロップで画像アップローダを作る。
と思ったらすでに沢山あります...。
今日は、ネタ集め。
$ git clone https://github.com/yokano/dnd_file_upload ./
インストールしたディレクトリの下にアップロードしたファイルを置くためのディレクトリ images を作る。
パーミッションは 777 にする。
upload.php をモディファイする。
＊ localhost/dnd/index.html でテスト。
FormDataオブジェクト、 Drag and drop を調べる。
アップロードしている時に表示するプログレスバーは nprogress.js、nprogress.css を使う。
・HTML5 Drag and drop (DnD)
実装に必要なイベントは７つあるイベントのうち３つだけ。
- dragstart ：ドラッグが開始された時に発生
- dragover ：ドロップ領域に日っている間連続して発生
- drop ：ドロップされた時に発生
HTML5 Drag and dropを実装してみよう から
参考URL
Ajaxでドラッグ＆ドロップで複数ファイル対応で進捗つきのアップロード
jQuery + ajax で ファイルアップロードするには
HTML5のコンテンツにファイルをドラッグ&ドロップでアップロードする
