iPhoneで画像選択→画像アップロードをする方法
なにやら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 ); ?>
参考リンク
- canvasに描いた絵(画像)をサーバに保存 - 超自己満足プログラミング
- Web アプリケーションからファイルを扱う
- [Rocks http://www.html5rocks.com/ja/tutorials/file/dndfiles/:title=JavaScript でのローカル ファイルの読み込み]
- 【HTML5】File APIを使って、投稿された画像を即時表示する方法【小ネタ】
- HTML5 File API readAsBinaryString reads files as much larger, different than files on disk?
- iOS6のSafariでサポートされるHTML5の機能
- 画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例
- inoch53のブログ : Base64のデコード。。。 - livedoor Blog(ブログ)