亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

具有捕獲和接受屬性的HTML文件輸入控件工作不正確?

具有捕獲和接受屬性的HTML文件輸入控件工作不正確?

拉丁的傳說 2019-12-17 15:19:06
我的問題:然后,用戶單擊input type=file用戶必須獲得upload file + camera對話框。我正在使用此html屬性accept和capture。但是在某些現代設備上,這不會發生。下面有代碼示例和下表,說明其正常工作與否。代碼示例在Mobile Safari和中進行了測試Chrome。W(ork)-啟用 upload image dialog with cameraP(人工工作)-啟用 upload dialog(not image only) with cameraN(ot work)- only camera啟用Ch-均值 ChromeMS-平均值 Mobile Safari#--------------------------------------------------------------------------------|devices/example   | Ch 1| Ch 2| Ch 3| Ch 4| Ch 5| MS 1| MS 2| MS 3| MS 4| MS 5| --------------------------------------------------------------------------------|Samsung S3/4.1    |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |--------------------------------------------------------------------------------|Samsung S3/4.3    |  N  |  N  |  P  |  P  |  P  |  N  |  N  |  P  |  P  |  P  |--------------------------------------------------------------------------------|Samsung Galaxy Tab|  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |--------------------------------------------------------------------------------|Samsung Note      |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |--------------------------------------------------------------------------------|iPhone 5          |  W  |  W  |  P  |  P  |  W  |  W  |  Y  |  P  |  P  |  W  |--------------------------------------------------------------------------------|Nexus 4           |  N  |  N  |  P  |  P  |  W  |  -  |  -  |  -  |  -  |  -  |--------------------------------------------------------------------------------如您所見,我只能upload file + camera使用<input type="file" accept="image/*">只要。但是capture在這種情況下沒有屬性,這讓我感到擔憂,并且Android 4.3出現了問題。我的問題是:表中的行為是真的嗎?Android 4.3的行為是否有錯誤?我是否可以信任瀏覽器,它將始終添加攝像頭以上傳沒有捕獲屬性的對話框?(請添加證明鏈接以獲得答案)謝謝。PS Question非常特殊,但是在我的網站上,我必須為用戶提供訪問其圖像和照相機的權限。另外,我認為我的桌子對任何人都可能有幫助,并且如果沒有人回答,我也會尋找答案并將其張貼在這里。
查看完整描述

2 回答

?
慕的地6264312

TA貢獻1817條經驗 獲得超6個贊

這是實際答案。只需將其發布在這里供下一個用戶使用:


實際上,當前的實現似乎根本不依賴于capture屬性,而僅依賴于type和accept屬性:瀏覽器顯示一個對話框,用戶可以在其中選擇文件的獲取位置,以及該capture屬性不考慮在內。例如,iOS Safari依賴于圖像和視頻(非音頻)的accept屬性(非捕獲)。即使您不使用該accept屬性,瀏覽器也會讓您在“拍攝照片或視頻”和“選擇現有”之間進行選擇(感謝@firt指出這一點)。




查看完整回答
反對 回復 2019-12-17
?
莫回無

TA貢獻1865條經驗 獲得超7個贊

“正確”的代碼和您應該使用的代碼是第五個代碼:


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


這就是為什么它在大多數設備上都能正常工作的原因。上面的代碼正確,完整,足以告訴iOS和Android:


您要捕獲圖像(accept="video/*"用于視頻和 accept="audio/*"音頻,請完全跳過以允許任何操作)。

用戶應該能夠選擇現有的一個或當場捕獲它

我是否可以信任瀏覽器,它將始終添加攝像頭以上傳沒有捕獲屬性的對話框?

是。


該capture屬性不是用來在對話框中包括camera選項的(<input type="file">足夠了),而是指示首選從網絡攝像頭直接捕獲。根據W3C建議規范:


capture屬性是一個布爾屬性,如果指定,則指示直接從設備捕獲媒體是首選。


capture受Android 3.0+支持,如果capture代碼中存在,它將直接帶您進入相機應用。


iOS6-10中不提供支持,該支持將始終為您提供至少兩個選項:“拍照” +“照片庫”。


該capture屬性在規范中得到了發展(這就是為什么您在整個StackOverflow中都會看到多個版本的原因):


2010年7月: accept="image/*;capture=camera"

2011年4月:(capture="camera"字符串)

2012年12月:(capture布爾值,W3C候選推薦標準,)

PS:我已經對HTML Media Capture進行了大量研究,請參見HTML9 Media Capture的正確語法和iOS9中Media Capture 的新提示。這是我的測試平臺,具有20多種代碼組合。


查看完整回答
反對 回復 2019-12-17
  • 2 回答
  • 0 關注
  • 704 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號