ファイルアップロードを非同期でかつ、ファイル選択をドラッグ&ドロップでおこなうため、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) {
});
}
}
}
});
上記設定では、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 エラーの時に呼び出される。 |
