読者です 読者をやめる 読者になる 読者になる

Andorid2.3でも画像などのファイルをAjaxっぽく画面遷移なしにアップロードする方法

Andorid2.3の標準ブラウザではajax送信時に便利なFormDataでの画像添付や、画像をbase64化してテキストとして送信するFileReaderが使えません。

ですので、一見、画像遷移なしに画像の送信ができそうにありませんが、formのtargetにiframeを指定することで画面遷移なしでファイルをアップロードすることができるようになります。

ファイル送信用(index.html)

<html>
<head>
  <script type="text/javascript" src="jquery.js"></script>
</head>
<body>

<script type="text/javascript">

//jqueryを使う場合のcallback指定方法
var callback = {};

$(function(){

  callback.yourFunction = function( message ){

    alert(message);

  }

});
</script>

<form target="iframe_upload" action="getAndShow.php" enctype="multipart/form-data" method="post">
  <input type="file" name="myFile"/>
</form>

<iframe name="iframe_upload" id="iframe_upload"></iframe>

</body>
</html>

ファイル受け取り用(getAndShow.php)

<?php

ob_start();
var_dump($_FILES);
$result = ob_get_contents();
ob_end_clean();

echo <<<HTML
<script type="text/javascript">
window.onload = function(){

 if(window.parent) {

  //iframeから見た親要素の関数を呼び出す
  window.parent.callback.yourFunction("{$result}");

 }

};
</script>
HTML;