コンピュータを便利に使う tips などをメモ
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)
実装に必要なイベントは７つあるイベントのうち３つだけ。
HTML5 Drag and dropを実装してみよう から
参考URL
Ajaxでドラッグ＆ドロップで複数ファイル対応で進捗つきのアップロード
jQuery + ajax で ファイルアップロードするには
HTML5のコンテンツにファイルをドラッグ&ドロップでアップロードする