具有捕获和接受属性的HTML文件输入控件是否有效?

时间:2014-02-03 09:22:57

标签: android html ios html5 mobile

我的问题:

然后,用户点击input type=file用户必须获得upload file + camera对话框。我正在使用此html属性acceptcapture。但在一些现代设备上,这并没有发生。下面是代码示例和表,它的工作与否。代码示例在Mobile SafariChrome中进行了测试。

TL; DR:

我有5个代码示例只有input type file

1。(jsfiddle

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

2。 (jsfiddle

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

3。 (jsfiddle

<input type="file" capture="camera">

4。 (jsfiddle

<input type="file" capture>

5。 (jsfiddle

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

测试设备:

  • Samsung S3(Android 4.1.2)
  • Samsung S3(Android 4.3)
  • Samsung Galaxy Tab 2 7.0(Android 4.2.2)
  • Samsung Note(Android 4.1.2)
  • iPhone 5(iOS 7.0.4)
  • Nexus 4(Android 4.4)

结果表:

  • W(ork) - 表示已启用upload image dialog with camera
  • P(artially works) - 表示已启用upload dialog(not image only) with camera
  • N(ot work) - 表示启用only camera
  • Ch - 表示Chrome
  • MS - 表示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存在问题。

我的问题是:

  1. 表中的行为是否属实? Android 4.3的行为是一个错误吗?
  2. 我是否可以信任浏览器,它总会添加相机上传     对话框没有捕获属性? (请添加证据链接以供回答)
  3. 感谢。

    P.S。问题很特殊,但在我的网站上,我必须提供用户访问其图像和相机的权限。另外我认为我的桌子对任何人都有帮助,我也会搜索答案,如果没有人回答,我会在这里发布答案。

3 个答案:

答案 0 :(得分:34)

这是实际的答案。只需将其发布给下一位用户:

  

实际上,似乎当前的实现并不依赖于   捕获属性,但仅限于类型和接受属性:   浏览器显示一个对话框,用户可以在其中选择   必须采取该文件,并且不采用capture属性   考虑到。例如,iOS Safari依赖于accept   图像和视频(不是音频)的属性(不捕获)。即使你   如果不使用accept属性,浏览器会让您选择   之间&#34;拍摄照片​​或视频&#34;和&#34;选择现有&#34; (感谢@ firt   指出这一点)。

来自this

2016年2月17日编辑: 此行为在设备上仍然有效。

答案 1 :(得分:19)

“正确”代码和您应该使用的代码是第5个:

File.exists?

这就是为什么它在大多数设备上都能正常工作的原因。以上代码正确完成足够告诉iOS和Android:

  1. 您想要捕获图片(使用<input type="file" accept="image/*">获取视频,使用accept="video/*"获取音频,完全跳过以允许任何内容)。
  2. 用户应该能够选择现有的当场捕获
  3.   
        
    1. 我是否可以信任浏览器在没有捕获属性的情况下总会添加相机上传对话框?
    2.   

    是的。

    accept="audio/*"属性不用于在对话框中包含相机选项(capture就足够了),但表示从网络摄像头直接捕获首选 。来自the W3C Recommendation spec

      

    capture属性是一个布尔属性,如果指定,则表示直接从设备捕获媒体...是首选。

    Android 3.0+支持

    <input type="file">,如果代码中出现capture,则会直接转到相机应用。

    在iOS6-10中没有支持者总会给你至少2个选项:“拍照”+“照片库”。

    capture属性已在规范中发展(这就是为什么你会在StackOverflow中看到几个版本):

    1. 2010年7月:capture
    2. 2011年4月:accept="image/*;capture=camera"(字符串)
    3. 2012年12月:capture="camera"(布尔, W3C候选推荐,)
    4. PS:我已经对HTML媒体捕获进行了大量研究,请参阅Correct Syntax for HTML Media CaptureThe New Prompt for Media Capture in iOS9。这是我的test bench,代码组合超过20个。

答案 2 :(得分:6)

自今天起(2020年2月),这是Android 9上的Chrome上的行为:

  Must be selected from album
  <input type="file" accept="image/*">

  Must be captured from camera
  <input type="file" accept="image/*" capture="">

  Allowed user to choose either from album or camera
  <input type="file" accept="image/*;capture=camera">