jQuery Mobileを利用した際にはファイルアップロードに注意が必要

2011/09/29 に jQuery Mobile 1.0 RC1 がリリースされ、正式リリースが間近に迫った jQuery Mobile を利用している方も多いだろう。今回は jQuery Mobile 利用時のちょっとした TIPS を紹介させて頂く。

ファイルアップロードに失敗する

jQuery Mobile を利用した Web アプリケーションで、以下の様な multipart/form リクエスト（ファイルアップロード）を行う場合に問題が発生する。まず、以下のサンプルコードを参照して欲しい。

<h3>画像のアップロード</h3>
<form action="/imgpost" method="POST" enctype='multipart/form-data'>
	<dl>
		<dt>コメント: </dt>
		<dd><input type="text" name="comment" placeholder="画像のコメントを入力して下さい" /></dd>
		<dt>画像ファイル: </dt>
		<dd><input type="file" name="upload" id='upload'/></dd>
	</dl>
	<input data-inline="true" type="submit" value="投稿">
</form>

特に凝ったものもないコードだが、上記のサンプルを利用してファイルをアップロードすると、ファイルアップロードではなく通常のPOSTリクエストとなる。

解決方法

この問題が発生するのは、「 jQuery Mobile のデフォルトでは、リクエストがAjaxリクエストとして取り扱われる」ことが原因となっている。解決方法は以下の二つがあるので、使いどころを見極めて使用してほしい。

• formタグに data-ajax="false" を指定する

<form action="/imgpost" method="POST" enctype='multipart/form-data' data-ajax="false">
	<dl>

• 共通ヘッダ等で $.mobile.ajaxEnabled = false; を記述する

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});