■目的
オリジナルフォームで画像添付する際にカメラ起動かファイル選択を選べるようにします。

■セット所要時間
10分

■セットの流れ
ポイントはiosデバイスとAndroidデバイスで設定が異なるのでそれを判別して実装します。
※ブラウザの仕様によるものなので、今後仕様に変更がある場合がございます。

サンプルページをベースに説明しますのでまずは下記ファイルをダウンロードしてください。

サンプルページ＞ 
サンプルダウンロード＞

※ソースコード確認方法 
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U 
mac：option + command + U


（１）
inputタグは下記のように設定してください。
accept属性、capture属性の設定で挙動が決まります。
※name属性は適宜設定

<input type="file" name="col_8" accept="image/*" capture="camera">

↓

（２）
iosでのアクセスの場合、capture属性を削除します。

<script>
// iPhone(ios)
if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0){
	$('input[type="file"]').removeAttr('capture');
} 
</script>

※ヘッダーにjqueryの読み込みがない場合は下記設置をしてください。バージョンの指定はありません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>