前回の記事
http://blog.asial.co.jp/1260
で、Formタグで画像を選択していましたが、この方法は、Android 4.4では出来なくなっています。(Android 4.4.2で確認。今後のバージョンアップで改善される可能性はあります)
そこで、ここではFormタグからではなく、File APIから画像を取得してファイルをアップロードする実装を考えてみます。今回は、サンプルとして、getPictureメソッドを使って、デバイス内の画像ファイルを選択してサーバーにアップするものを考えます。
注意事項:
BlobがWebViewで使用出来る必要があります。Nexus 5では確認していますが、4.4より以前のAndroid端末などでBlobが使えないと、この記事の方法は出来ません。
【2014/07/3捕捉】
※Android 4.4.4では上記の問題が改善され、Formタグでも画像が選択出来るようになりました。
サーバー側の実装は、前回の記事とまったく同じなので、説明は割愛します。
サーバー側は、通常のフォーム処理と同じで良いところがこの方法の優れた点です。(レスポンスをjsonにするところだけは違います)
最初に、コードの全体を示します。
function getPhoto () {
navigator.camera.getPicture(movePic, onFail,
{ quality: 50,destinationType: Camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM });
}
function movePic(imageuri){
window.resolveLocalFileSystemURI(imageuri, resolveOnSuccess, resOnError);
}
function onFail (message) {
alert('ERROR' + message);
}
function resolveOnSuccess(entry) {
entry.file( function(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
var formData = new FormData();
formData.append("userfile", new Blob([evt.target.result],{"type":file.type}), "uesrfile.png");
upload(formData);
};
reader.readAsArrayBuffer( file );
}, resOnError );
}
function resOnError(error) {
alert(error.code);
}
function upload(fd) {
$.ajax(
'http://[server url]/uploader.php',
{
type: 'post',
processData: false,
contentType: false,
data: fd,
dataType: "json",
success: function(data) {
alert( data.message );
console.log(data);
},