ドラッグアンドドロップでファイルを指定できるアップロードアプレットを作ってみた

Applet Java

仕事では社内向けWebシステムを作っていますが、ファイルをアップロードしたいという要求はやっぱり多いです。

とりあえずはHTMLのINPUT="file"で作るわけですが、「アップロードするファイルはドラッグ＆ドロップで選択したい」とよく言われます。
気持ちは分かります。自分がユーザーだったら同じことを思います。

最近は（試していませんが）JavaScriptとかでもできるのがあるみたいで、jQueryのプラグインでも探せば見つかりそうです。
でも、社内には必殺のIE6がまだ健在であり、開発者としてはかなりつらい状況です。
ということで、いろいろ検証するのも面倒だったので、Javaアプレットを自作しました。

画面イメージ

ドラッグ＆ドロップでファイルを一覧に追加できます。削除は、行を選択して右クリックから。

ソース
FileUploadApplet.zip 直

使い方

AppletからJavaScriptを呼び出すようになっているので、plugin.jarをクラスパスに入れておいて下さい。


HTML側（下の例はJSPです）こんな形でアプレットを呼び出すようにします。

<script language="javascript">
	function reloadPage()
	{
		location.reload(true);
	}
</script>

<applet code="jp.milt.util.applet.FileUploadApplet.class" archive="applet.jar" width="600" height="400" mayscript="true">
	<param name="uploadUrl" value="http://xxx.example.com/sample/applet/"/>
	<param name="sessionKey" value="jsessionid"/>
	<param name="sessionValue" value="${f:h(pageContext.session.id) }"/>
	<param name="fileInputName" value="formFiles"/>
	<param name="relationInfoKey" value="uploadFileId"/>
	<param name="relationInfoValue" value="XXXX00001"/>
	<param name="otherPostKey" value="upload"/>
	<param name="otherPostValue" value="upload"/>
	<param name="callback" value="reloadPage"/>
	<param name="cache_version" value="0.3"/>
</applet>
パラメーター名 指定する値
uploadUrl ファイルをアップロードするURLを指定します。
sessionKey セッションのキーの名前を指定します。
sessionValue セッションの値を指定します。
fileInputName ファイルのパラメーター名を指定します。
relationInfoKey 付加情報１のパラメーター名を指定します。
relationInfoValue 付加情報１の値を指定します。
otherPostKey 付加情報２のパラメーター名を指定します。
otherPostValue 付加情報２の値を指定します。
callback アップロード処理が完了した後に呼び出したいJavaScriptの関数名を指定します。

サーバー側は普通にファイルアップロードを受け取る形で問題ないはずです。

SAStrutsのActionFormの例

public class AppletForm
{
	// 付加情報１
	public String uploadFileId;
	// アップロードファイル
	public FormFile[] formFiles;
}

上の例の場合、付加情報２はSAStrutsのActionで実行するメソッドを選択するために使用しています。

サーバー側でエラーが発生した場合、下記のいずれかのステータスコードを返すようにします。

  • BadRequest
  • UnAuthorized
  • Forbidden
  • NotFound
  • それ以外


普段使わないSwingとAppletで作ったので無駄な記述とかあるかもしれません・・・。



参考にさせていただいたサイト
アプレットからWebサーバへファイルアップロード(高速化・大容量対応) - 今日覚えたこと