勉強したことのメモ

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

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

   

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

 

■ダウンロード先

http://www.dropzonejs.com/

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

 

■使い方

画像を送信するページ

 

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

 

■その他

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

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

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

 

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

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

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

 - jQuery

  関連記事

配列をjQueryで取り扱う

やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...

jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

FullCalendarでtitle以外も表示させたい

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...

jQueryの最新バージョン呼び出しとバージョン確認

<script type="text/javascript" src="h ...

submit関連のjQuery

<?php //jQueryでのsubmit,エンターキーでのsubmit ...

tableのヘッダーを残して表示(jquery-decapitate)

bootstrapはあまり使わないので切り離して使えるように したいところ。 ■ ...

htmlタグが入った内容の文字を丸める

phpである文字列が○文字以上だった際、 省略してお尻に「……」をつけたいという ...

画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

簡単にtable内をソート

やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...