勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

画像をドラッグ&ドロップでアップロードする方法

   

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdropzoneのことをメモっていたけど、もうちょっと突っ込んだ使い方のメモ。

 

■ダウンロード先

http://www.dropzonejs.com/

※ページ内で「download」で検索すると見つかりやすい。

 

■使い方

画像を送信するページ

 

画像を受信してディレクトリにアップロードするページ

 

■その他

・ある程度のブラウザで使えそう

以前はIEのバージョンの問題で使用を見送ったけど、サポートされているIEのバージョンが10以上で、今の最新が11(公開日が2013/10/17)なので、そろそろ使っても大丈夫そう。

また、複数アップロードも対応しているのがありがたい。

 

・画像と一緒にデータも送りたい

例えばユーザIDみたいなものを送って、受信側で「ユーザID,画像名」をデータベースに残したい、みたいなことがあったとする。その場合はdropzoneの部分をformにしてinput=hiddenで送信するとよい。詳しくは以下のような形。

dropzoneのオプション部分で決められるとスマートなんだけど、ちょっと見当たらなかった。

 - jQuery

  関連記事

110126-HTML5_Logo
formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

jquery_logo
jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...

jquery_logo
jQueryでshow/hideよりaddClass/removeClassの方が速い

diaplay:none/blockする際に最近はshow()/hide()を ...

flash_player_11_icon_rgb
FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

jquery_logo
Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

jquery_logo
アコーディオンメニュー

簡単にアコーディオンメニューを導入したい時に 便利に使えたプラグイン。 ■サンプ ...

jquery_logo
ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

jquery_logo
classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

jquery_logo
フォームのpasswordとtextをjQueryで切り替えて

パスワード入力の際、大抵「●●●」みたいな形で隠されるが、 jQueryでそれを ...

jquery_logo
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...