Dropzoneで非同期ファイルアップロードをする方法

ファイルアップロードを非同期でかつ、ファイル選択をドラッグ&ドロップでおこなうため、Dropzoneを使って実装する方法です。
デフォルトのまま使ってもUIがかっこよくっておすすめです。
公式のページはいかになります。

http://www.dropzonejs.com/
GitHub - enyo/dropzone

インストール

dropzone.jsのダウンロードは、公式サイト or GitHubからダウンロードして読み込み。

<script type="text/javascript" src="js/dropzone.js"></script>

フォームの追加

<form id="my-awesome-dropzone" action="/target" class="dropzone">
      <div class="dz-default dz-message"><span>「ドラッグ＆ドロップ」またはここをクリック</span></div>
      <div id="upload_message"></div></form>

dz-messageで、デフォルトの表示メッセージを変更しています。

configファイルの設定

dropzone用のconfigファイル(dropzone_config.js)を作成します。
Dropzone.optionsのオブジェクとを定義して行きます。
Dropzone.options.myAwesomeDropzoneのmyAwesomeDropzoneはformのidをキャメルケースにした文字列を指定します。

jQuery(function () {
    if ($('form.dropzone').length > 0) {
      Dropzone.options.myAwesomeDropzone = {
            maxFiles: 2,
            autoProcessQueue: true,
            init: function () {
                this.on("maxfilesexceeded", function (file) {
                    this.removeAllFiles();
                });
                this.on("addedfile", function (file) {
                    if (this.files[1] != null) {
                        this.removeFile(this.files[0]);
                    }
                    return $('#upload_message').html("");
                });
                this.on("success", function (file) {
                    var shop_category = jQuery.parseJSON(file.xhr.response).shop_category;
                    return $('#upload_message').html("
                      <b style='color: green;'>アップロード成功しました。</b>");
                });
                this.on("error", function (file) {
                    return $('#upload_message').html("<b style='color: red;'>アップロードに失敗しました。</b>");
                });
                this.on("complete", function (file) {
//                    this.removeFile(file);
                });

            }
      }
    }
});

上記設定では、maxFiles: 2としていますが、1個づつファイルをアップロードするようにしています。
addedfileイベントで、2個目のファイルをアップロード使用とした時に、0番目のファイルを削除しています。
こうすることで、ファイルを先入先出にして、使い勝手がよくなると思います。
上記で作成した、dropzone_config.jsは、scriptタグで使う場所に読み込みます。

<script type="text/javascript" src="js/dropzone.js"></script>
<script type="text/javascript" src="js/dropzone_config.js"></script>

これまでの設定で、Server側へのファイルの送信が可能となります。

---

今回使用した、オプションとイベントは下記の通りです。
他にもオプションやイベントが使えるので詳細は、公式ページをご確認ください。

オプション

option	説明
maxFiles	指定できるファイル数を指定する。指定数を超えた場合、dz-max-files-reached が呼ばれます。
autoProcessQueue	複数ファイルアップロードした場合に、アップロードを自動でqueueで処理するかの設定。falseにした場合、.processQueue() を自分で呼び出す必要がある。基本 true でよいと思います。

イベント

event	説明
maxfilesexceeded	ファイル数がmaxFilesの指定を超えてた時に呼び出される。
addedfile	ファイルを追加した時に呼び出される。
success	ファイルアップロード成功時に呼び出される。
error	ファイルアップロードでエラーが発生した時に呼び出される。
complete	ファイルアップロードが成功 or エラーの時に呼び出される。