チップス

jquery php ドラッグ&ドロップで画像アップローダ


jquery+php でドラッグ&ドロップで画像アップローダを作る。

と思ったらすでに沢山あります...。 

今日は、ネタ集め。

yokano/dnd_file_upload

$ 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)
 実装に必要なイベントは7つあるイベントのうち3つだけ。

  1. dragstart :ドラッグが開始された時に発生
  2. dragover :ドロップ領域に日っている間連続して発生
  3. drop :ドロップされた時に発生

HTML5 Drag and dropを実装してみよう から

参考URL
Ajaxでドラッグ&ドロップで複数ファイル対応で進捗つきのアップロード

jQuery + ajax で ファイルアップロードするには

HTML5のコンテンツにファイルをドラッグ&ドロップでアップロードする

HTML5でファイルをドラッグして読み込むやつ

HTML5 Drag and dropを実装してみよう


   チップス