【html5】iPhoneとAndroidでwebページのフォームからカメラ・アルバムで画像を投稿

2014年06月03日

  1. TOP
  2. BLOG
  3. HTML
  4. 【html5】iPhoneとAndroidでwebページのフォームからカメラ・アルバムで画像を投稿

今作っているサービスでスマホから画像のアップロードをしたいという要件が上がっています
しかも画像は複数枚でカメラやアルバム(Androidだと呼称が違う?)から選択したいとのこと。

そもそも上記実装が現時点で可能かを調べて見ました。

要件

スマホサイト(アプリではない)から画像を複数枚投稿する仕組みの実装
以下の2種類の方法で画像を選択する
①カメラを起動して撮影
②アルバム(保存している画像)の中から選択

更に画像は複数枚投稿出来るようにする。

調査機種

iPhone 5 (ios 7)
HTC J (Android 4.0.1)

調査内容

①Webページからカメラの起動・アルバムの表示は出来るのか?
②複数の画像を一括で選択出来るのか?

①Webページからカメラの起動・アルバムの表示

これに関してはHTML5を使用することで容易に実装できました
下記のタグを挿入するだけでカメラの起動かアルバムを選択かが表示されます

しかもios, Android共通です
※但しiPhoneはios6以降出ないと対応が出来ないようです。

 
<form>
  <input id="image" accept="image/*" type="file" />
</form> 

 

②複数の画像を一括で選択出来るのか?

これも上記のタグにmultiple属性を追加することで対応出来るようです。
但しカメラ撮影で複数枚投稿するのは出来ないようです。

<form>
  <input id="image" accept="image/*" type="file" multiple />
</form>

 

困ったことが。。。

まず無限に投稿出来るとマズイので枚数を限定したいのですが、
制御ができなさそうなのでこちらは別途JSの実装が必要っぽいです。

次にAndroidの方なのですが複数枚の選択ができません。ただandroid 4.0.1はmultipleは対応しているはずなのですが・・・

これがOSなのか機種的な依存なのかよくわからないです。

こちらは追って対応が完了したら報告します。