Linux実践講座

Linux実践講座

コンピュータを便利に使う tips などをメモ

--- 広告 ---
--- 広告 ---

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

読了までの目安時間:約 2分

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を実装してみよう

--- 広告 ---
--- 広告 ---

 

この記事に関連する記事一覧

無料メルマガ登録
最近の投稿
 
%d人のブロガーが「いいね」をつけました。