移动端如何实现图片选择下拉菜单+仅允许图片的HTML5原生方案？

问题描述 #

在iPhone移动端，使用<input type="file" accept="image/*;capture=camera">时，能唤起包含相机、图库、文件的下拉选择菜单，但无法限制用户仅选择图片文件；使用<input type="file" accept="image/*" capture>时，虽然能限制仅选择图片，但会直接打开相机，没有下拉选择菜单。目前只能通过JS来限制非图片文件，想知道是否有HTML5原生实现方式，同时满足显示下拉选择菜单和仅允许选择图片文件的需求。

演示代码 #

<p>可选择相机、图库、文件但允许所有文件：</p>
<input type="file" accept="image/*;capture=camera">

<p>仅允许图片但无下拉菜单，直接打开相机：</p>
<input type="file" accept="image/*" capture>

回答 #

目前HTML5原生属性无法在iPhone上同时实现「显示相机/图库/文件下拉菜单」和「仅限制图片选择」的需求，具体原因如下：

• 当使用accept="image/*;capture=camera"时，iOS Safari会将该accept值解析为允许所有文件类型，因此无法限制非图片文件的选择；
• 当使用accept="image/*" capture（或capture="user"/"environment"）时，iOS会直接唤起相机，跳过下拉选择菜单环节。

如果不想依赖JS校验，目前没有完美的原生解决方案。不过可以尝试以下优化方式：

• 使用accept="image/jpeg,image/png,image/gif"替代image/*，部分iOS版本可能会对具体的图片MIME类型有更严格的识别，但仍无法完全保证文件选择器只显示图片；
• 不同iOS版本对capture和accept组合写法的表现不一致，不存在统一的原生实现能满足你的需求，JS校验仍是当前最可靠的方式。

内容的提问来源于stack exchange，提问作者Miro