JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
■応用の森　dropzone.jsを使用した、Ajaxでのファイルアップロードサンプル　解説

 

今回は、前にご紹介した、File APIではない、フィルアップロードツールとしては世間で最もポピュラーと思われる
dropzone.jsを使ったAjaxによるファイルのアップロード処理のサンプルプログラムの紹介です。

dropzone.jsの公式サイトは英語版しかなく
色々なサイトを参考に、読み解くのになかなか苦労しましたが、なんとか自分の要求にみあったものができたので
公開してみることにしました。

大まかな制御としては、Dropzoneのエリアを作成し、ドロップされたファイル情報を
FormDataにセットして、Ajaxでサーブレットに送信します。
サーブレットは、受け取ったファイルをBase64エンコードして、そのままブラウザに返却し、
結果の画像をブラウザに表示します。
それでは、簡単にプログラムの解説です。
１）コントローラ
src/main/java/jp/dip/arimodoki/cntl/Dropzone.java

・dzfileuploadview()　メソッド
　アップロード用初期画面(dzuploadview.html)を表示するだけのハンドラメソッドです。

・dzfileupload()　メソッド

　Viewの「アップロード」ボタンがクリックされたときに実行されるメソッドです。
　Viewから送信された複数ファイル情報をFormFile Beanで受け取り、
　Base64エンコードしたものを、そのままView(dropresult.html)に返却します。
　Base64エンコード形式の画像表示方法については、
　【HTML編　No002：Base64形式の画像データ(jpeg/gif/png)を表示する方法】
　で解説していますので、こちらも参考にしてみてください。
データを受け取るフォームBeanクラスです。
src/main/java/jp/dip/arimodoki/model/FormFile.java

Viewから送信された画像ファイル情報の配列(uploadfile)と、各画像のMIME(imgtype）のプロパティと
受け取った画像をBase64変換してViewに返却するための結果情報(respImage)プロパティを持つフォームBeanです。
インターフェース FormFileIf.java は、Eclipseの「インターフェース抽出」で自動生成します。

 
２）View(HTML)
まず、アップロード画面のHTMLです。
WebContent/dzuploadview.html

HTML部は非常に単純なので説明の必要もないかもしれませんが、
<div id="div_alert"> の部分は、Ajaxがエラーを起こしたりした場合のアラート表示エリアです。
<div class="dropzone" id="fileupload"> の部分が今回の心臓部。ファイルのドロップ領域です。
<button id="id_upload"．．．> の部分は、ファイルのアップロードを実行するボタンです。
<div id="result> の部分は、送信された画像の処理結果を表示する領域です。

JavaScript部に、dropzoneや、Ajaxの処理が記述されていませんが、
今回はこれらをライブラリ化して、外部javaScriptファイルに追い出しています。
mydropzone.js、myutil.js　がその実態ですが説明は後ほど。
話の関係上、結果Viewを先に説明します。
WebContent/dropresult.html

サーブレットから返却された、Base64形式の画像情報文字列の配列を
Thymeleafの、th:eachを使って、<img>タグに書き出しています。
Ajaxの処理結果として、結果表示エリア(<div id="result>)に描画されます。
dropzone用スタイルシートです。
dropzoneは、スタイルシートでデザインを装飾しないと、あまり見栄えのよい動作を実現できません。
ある意味、かなり重要なファクターです。
色々なサイトや、経験を参考にして自分なりのスタイルシートを用意してみました。
WebContent/css/mydropzone.css

ひとつひとつ説明するのが困難なので、詳しい内容の説明は割愛します。（使いたい場合は、そっとそのまま使ってください）
さて、やっと出現しました。dropzone処理の心臓部。外部ファイルでライブラリ化しています。
WebContent/js/myutil/mydropzone.js

dropzoneの初期化処理、イベントハンドラの設定、各種プロパティの設定を行い
登録されたイベントハンドラの処理を実装しています。
先頭にある　FileTypesは、送信可能なファイルタイプをフィルターするためのテーブルです。
myDropzone()のパラメータで、filetype:FileTypes.image　のように指定すると、
画像タイプのファイルだけが送信可能となります。

詳しい内容はソースのコメントを読んでください。
ちなみに、ファイルタイプの正規表現チェックで、
underscore.jsが必要です。
Ajax処理ライブラリ。
WebContent/js/myutil/myutil.js

jQueryのAjax処理は、毎回だいたい同じ処理を記述するので
Ajax実行部を外部ライブラリ化しました。
これまで随所でさんざんご紹介しているので、詳し処理内容はソースのコメントを読んで各自解析してみてください。
Dropzoneサンプル  dropzone.jsを使用した、Ajaxでのファイルアップロードサンプル　解説
HOME