然后,用户单击input type=file
用户必须获得upload file + camera
对话框。我正在使用此html属性accept
和capture
。但是在某些现代设备上,这不会发生。下面有代码示例和下表,说明其正常工作与否。代码示例在Mobile Safari
和中进行了测试Chrome
。
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/*">
测试设备:
结果表:
upload image dialog with camera
upload dialog(not image only) with camera
only camera
启用Chrome
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出现了问题。
谢谢。
PS
Question很特殊,但是在我的网站上,我必须为用户提供访问其图像和照相机的权限。另外,我认为我的桌子对任何人都可能有帮助,并且如果没有人回答,我也会寻找答案并将其张贴在这里。
这是实际答案。只需将其发布在这里供下一个用户使用:
实际上,当前的实现似乎根本不依赖于capture属性,而仅依赖于type和accept属性:浏览器显示一个对话框,用户可以在其中选择文件的获取位置,以及该capture
属性不考虑在内。例如,iOSSafari依赖于图像和视频(非音频)的accept属性(非捕获)。即使您不使用该accept
属性,浏览器也会让您在“拍摄照片或视频”和“选择现有”之间进行选择(感谢@firt指出这一点)。
编辑日期:2016年2月17日: 此行为在设备上仍然有效。
我有5个只有的代码示例: 1.() 2.() 5.() 测试设备: 三星S3(Android 4.1.2) 三星S3(Android 4.3) 三星Galaxy Tab 2 7.0(Android 4.2.2) 三星Note(Android 4.1.2) iPhone 5(iOS 7.0.4) Nexus 4(Android 4.4) null 正如您所看到的,我只能为所有浏览器使用对话框 。但是
问题内容: 我的页面上有一个文件上传对象: 在我的桌面上使用以下excel文件: file1.xlsx file1.xls file.csv 我要上传文件到 ONLY 显示,,和文件。 使用属性,我发现这些内容类型负责&扩展… = application / vnd.openxmlformats- officedocument.spreadsheetml.sheet(.XLSX) = applic
我的页面上有一个文件上载对象: 我的桌面上有以下excel文件: 文件1.xlsx 文件1.xls 文件.csv 我希望文件上载仅显示、、&文件。 使用属性,我发现这些内容类型处理了和扩展... =application/vnd.openxmlformats-officeDocument.spreadsheetml.sheet(.xlsx) =application/vnd.ms-excel(.x
我一直有这个错误:一个组件正在将受控输入的类型文本更改为不受控制。输入元件不应从受控切换到不受控(反之亦然)。决定在组件的生命周期内使用受控或不受控制的输入元件。当我尝试将值从数据库输入框点击编辑 这是我的代码:
问题内容: 在html下实现文件上传非常简单,但我只是注意到可以将“ accept”属性添加到标记中。 此属性作为限制文件上传到图像等的方式有用吗?最好的使用方法是什么? 或者,是否有一种方法可以限制html文件输入标签的文件类型,最好在文件对话框中? 问题答案: 该属性非常有用。这提示浏览器仅显示当前允许的文件。尽管通常可以被用户覆盖,但默认情况下它可以帮助缩小用户的搜索范围,因此他们可以准确地
我正在尝试定义可重用的React组件,这些组件通过道具接受React. Context字段。它们可能不需要父上下文中可用的全部属性,并且,考虑到重用的愿望,可能会封装在具有不同上下文结构的提供程序中(但重用的子组件需要相同的核心属性)。例如,树中较高的父提供程序可能会定义Context类型,如下所示: 子组件应该(我相信)能够用较少属性定义一个上下文属性,如下所示 或通过Pick 然而,当prop