Q&A
どのような理由で区別したいのでしょうか？
（capture属性でカメラ指定をすることは可能ですが、それでは賄えない状況でしょうか？）
現在、Webシステムを開発しており、fileアップロード時inputタブで、複数のファイルをアップロードすることを想定しております。
HTML
1<input accept="image/*" type="file" multiple maxlength="5" />
この時に、ファイル選択完了後にjavascriptで処理をするようにしているのですが、そこで、カメラを起動して撮影した画像なのか、もしくは、フォルダの中から選択した画像なのかによって処理を分けたいのですが、そこの判別方法が調べても分からなかったため、質問させていただきました。
どうぞ、よろしくお願いいたします。
質問、ありがとうございます。
画像の中からExif情報を取得したいためです。
iPhone、iPadでは、カメラで撮影した写真だと、Exif情報が取得できなかったので、それで対応を分けたいと思い、このような質問をさせていただいております。
iPad・iPhoneでは、カメラの設定を、互換性優勢で使用する予定ですので、そこにはExif情報があるのですが、ファイルアップロード時に撮影した写真だと、Exif情報がないことを確認しております。
カメラよりも、ファイルアップロードも行いたいため、capture属性だけでは対応はできない状況かと思っております。
※カメラが起動しないようにできれば、それでも問題はありません。
〇互換性優勢
https://omoidebako.jp/blog/ios11-heif/
〇iOS 写真アップロードについて
https://qiita.com/zaru/items/29c12e2c8a7351f502e1
よろしくお願いいたします。
> iPhone、iPadでは、カメラで撮影した写真だと、Exif情報が取得できなかったので、それで対応を分けたいと思い
「Exif情報の取得を試みて、失敗した場合も考慮した処理を書く」ではだめなのでしょうか？
はい。例えば、PCでpngファイルをアップロードした場合などとは、分けたいために今回の質問をさせていただいておりますが、もし難しいようであれば、例えば以下のような条件でそれを検知することは可能なような気がしてきました。
・Exif情報が取得できない。 かつ
・ファイルが1つしかない。 かつ
・ファイルのFile.prototype.lastModifiedが、現在日時よりも30秒以内。（30秒は適当ですが。。）
回答1件
0
良い質問ですね。
自分も、写真共有サイトを作った時に、スマホからのアップロードで判別できるといいなあと思っていました。
以下２点、ご提案させていただきます。
- 取得した素材からは、ファイル名と取得時間ぐらいしか判別できないので、その点で判断する。
index.html
1<html> 2<head> 3 <title>カメラ取得かファイル選択可を判別</title> 4</head> 5<body> 6 7 <h1>FileUpload</h1> 8 9 <input type="file" name="test"> 10 <div class="message" style="white-space:pre;"></div> 11 12<script> 13document.querySelector("input[type='file']").addEventListener("change" , function(e){ 14 var msg = document.querySelector(".message"); 15 var txt = ""; 16 for(var i=0; i<e.target.files.length; i++){ 17 txt += i+" : \n"; 18 for(var j in e.target.files[i]){ 19 txt += j +" : "+ e.target.files[i][j] +"\n"; 20 } 21 txt += "\n"; 22 } 23 24 msg.textContent += txt; 25}); 26</script> 27 28</body> 29</html>
- スマホの場合はカメラのみ起動
INPUTタグ
1<input type="file" name="test" capture>
こうすると、カメラ起動のみになります。
投稿2020/09/24 22:44
編集2020/09/24 22:59
総合スコア241
あなたの回答
tips
プレビュー
