勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

スマホでフォームの画像アップロード部分でカメラを起動させる方法

   2024/04/16  HTML

formの画像アップロード部分で、スマホの場合にカメラで撮影させたい。以下に対応方法をメモ。

 

capture属性

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/capture

 

ソースコード

<!--カメラ直接起動-->
<input type="file" accept="image/*;capture=camera">
<!--カメラやギャラリーの選択-->
<input type="file">

尚、iphoneに関してはどっちのパターンでもカメラやギャラリーを選択するダイアログみたいなのが出てきた。

 - HTML

  関連記事

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...

画像をアップロードすると複数サムネイルを生成する方法
画像をアップロードすると複数サムネイルを生成する方法

フォームで画像をアップロードすると、予め定めておいた大中小のサイズでサムネイル画 ...

LightboxをjQuery無しで実装できる「Luminous」の利用方法
LightboxをjQuery無しで実装できる「Luminous」の利用方法

あるサイトのコーディングデータを貰った際、jQueryは使用していないのにLig ...

formのinput=
formのinput="file"でディレクトリを選択させ、ディレクトリ内のファイルを全てアップロードする方法

フォームで複数のファイルをアップロードしたい場合、input="file"を複数 ...