jQuery Mobile（というよりJavaScript）では、セキュリティ上の観点からajaxでmultipart/form-dataを使えません。
そこで、ifameを使って対応しました。
通常の方法を試してみる
以下のようなページ構造を考えてみます。index.php
- ページ1（データ一覧）
- ページ2（データ登録） ⇒データ登録.php（data-ajax="false"）
戻ってきたときにmobileinitあたりで「引数があればページ2に飛ばす」処理を入れれば対応できそうですが、速度が気になりました。
iframeを使った処理
formのターゲットにiframeを使ってみます。登録後にページ1に戻ります。ページ2の概要
<script>
function upload() {
$('#form1').submit();
alert('登録しました');
location.hash = 'ページ1";
}
</script>
<form id="form1" method="post" action="データ登録.php" target="upload">
<input name="dataname" id="dataname" type="text" />
<input name="photo" id="photo" type="file" />
<input type="button" value="登録" onclick="upload();" />
<iframe name="upload" style="width:0;height:0;border:0;"></iframe>
</form>
iframeのCSSでは「display:none;にすればよい」という記述も見かけますが、対応していないブラウザもあるようなのでサイズをゼロにしています。データ登録.phpでは、通常の処理をすればOKです。
iframeを見えるようにして、データ登録.phpの最後に「登録しました」と出力するようにしてもいいかもしれません。
