iPhoneで画像選択→画像アップロードをする方法

JS

なにやらiOS6ではFileAPIが使用できるっとのことで、使ってみました。

画像を選択すると、画像がプレビューされ、自動でサーバーにアップロードされます。

<script>
window.addEventListener("load", function(){
        if (!window.File){
            result.innerHTML = "File API 使用不可";
            return;
        }
        result.innerHTML = "画像を選択してください";
        document.getElementById("imageFile").addEventListener("change", function(){
                var reader = new FileReader();
                var file = document.getElementById("imageFile").files[0];
                result.innerHTML = "画像の設定を設定しています・・・";
                reader.onload = function(event){
                    document.getElementById("img").src = reader.result;
                    var file = document.getElementById("imageFile").files[0];
                    var fileName = file.name;
                    var fileSize = file.size;
                    result.innerHTML = '【画像情報】<br/>ファイル名:' + file.name + '<br />' + '種類: ' + file.type + '<br />' + 'サイズ: ' + file.size + '<br />';
                    $.ajax({
                        type: 'POST',
                                url: 'http://yourserver',
                                data: {file: event.target.result},
                                success: function(){
                                result.innerHTML = "画像の設定が完了しました！";
                            },
                                error: function(a, b, c){
                                alert('ファイルのアップロードに失敗しました');
                                console.log(a, b, c);
                            }
                        });
                }
                reader.readAsDataURL(file);
            }, true);
    }, true);
</script>
<form>
<input type="file" accept="image/*" id="imageFile"/>
</form>
<img id="img"width="200" height="200">
<div id="result"></div>

受け取り側のPHPプログラム

<?php
$from_arr = array( " " , "data:image/png;base64," , "data:image/jpg;base64," , "data:image/jpeg;base64," , "data:image/gif;base64," );
$to_arr   = array( "+" , "" , "" , "" , "" );
$photo    = base64_decode( str_replace( $from_arr , $to_arr , $_POST[ 'file' ] ) );
$filename = "output.jpg";
file_put_contents( $filename , $photo );
?>

参考リンク