HTMLのForm type="file"につきまして

Question

HTMLのForm type="file"につきまして、
クライアントより投稿された画像データを受け渡すプログラムを書いております。

通常上記のtype="file"属性を使用する場合には、クライアントサイドでアップロードしたい
画像が格納されていいるディレクトリを探しに行くような動きが起きると思います。

これは、非常に手間なので、ページ上にドラッグ＆ドロップで画像ファイルデータを読み込み
POSTで当該データを受け渡すようなことができますか？

ご教示をいただければ幸甚です。
（このような処理を行うためのわかりやすいサイト等があれば同様にありがたいです）

よろしくお願い申し上げます。

Answer 1

HTML5のドラッグアンドドロップAPIを使うようです。

今から３分で，HTML5のドラッグ＆ドロップAPIと File APIを習得しよう（JSの実装サンプル付き） - 主に言語とシステム開発に関して
http://d.hatena.ne.jp/language_and_engineering/20140330/HTMLfiveDragDropAndFileAPISample
ファイルをアップロードする(複数ファイル＋ドラッグ＆ドロップ対応版)
http://www.petitmonte.com/php/fileupload_multi_drog.html

しかし、古い実装のwebブラウザでは対応していないこともあるので、jQueryを使う方法もあります。

画像アップロード(4)IEでもドラッグ＆ドロップ対応、Ajax化しつつJavaScript無効の環境にも対応 - k-holyのPHPとか諸々メモ
http://k-holy.hatenablog.com/entry/2015/03/19/233801

Answer 2

JavaScriptとの組み合わせでFormDataクラスを使えばできます

ドラッグ＆ドロップでフォームにファイルのデータを追加するサンプルがこちらにありますので参考まで
FormDataクラスについて

ちなみにIEの9以前はサポート外ですので注意してください

Comments

[RyoseiEgawa]

各位
ご回答をいただき、まことにありがとうございます、
すみません、同じJavascriptでdropzone.jsを使用すれば良いことがわかりました。
http://webdelog.info/blog/2013/03/04/dropzonejs.html

しかし、この場合Formのactionは画像データを特定のfolderへ保存することとなりますが
同じフォーム内には、画像の保存以外他のラジオボタン選択肢があり、これらを他の.phpファイルに受け渡すことを意図しております。

つまり、Form内で複数のactionをもたせてしまうこと（おそらくこれはできない？）になってしまうのですが、どのように解決すれば良いのでしょうか？

イメージとしては
①投稿画面.phpのFormで
（１）input="text"で画像内容の説明
（２）dropzoneで画像をDrag&Drop保存
これらの結果、
②確認画面.phpに受け渡し、その後
（１）についてはMYSQLにデータを引き渡す
（２）についてMYSQLにパスデータを引き渡すとともに./gazou-sokoフォルダにデータを
格納する

といった感じです。よろしくお願いもうしあげます。

[KoichiSugiyama]

横からすみません。
意図されている処理をする一例として、ボタンクリックのイベントでJavascriptの関数を呼び出しその関数の中でPOSTするデータ(フォームのデータ)およびファイルの情報を自力で付け足してXMLHttpRequestで指定のphpファイルに送ってやることで実現できます。

[RyoseiEgawa]

ご回答いただき、誠にありがとうございます。
まだまだ、JSに明るくないため、ご教示いただいた方法が正直、すぐに成る程
と腹におちるところではないですが、調べてみます。
改めて深謝を申し上げます。