【移动端】input type=“file” 在移动端H5页面实现调用本地相册、拍照、录音

本文详细解读HTML5中<input type=file>元素的accept, capture和multiple属性，助你理解如何在不同设备和场景下正确调用摄像头、图库及选择文件类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

三个属性：

accept - 规定可提交的文件类型。

capture - 系统所捕获的默认设备。camera(照相机)，camcorder(摄像机)，microphone(录音)

mutiple - 支持多选。当支持多选时，multiple优先级高于capture。

几种写法：

<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
<!-- ios 和 安卓都可以调用摄像头 -->

<input type="file" name="upload" accept="image/png,image/jpeg,image/gif" capture="camera">
<!-- 在安卓无法调用摄像头 -->

<input type="file" accept=".gif,.jpg,.png,.jpeg,.bmp" name="file" />
<!-- 在安卓微信会出现 "No apps can perform this action" 在uc浏览器正常。 ios能正常使用。pc端可以使用 -->

<input type="file" accept="image/*" capture="camera">
<!-- 调用相机 -->

<input type="file" accept="video/*" capture="camcorder">
<!-- 调用摄像机 -->

<input type="file" accept="audio/*" capture="microphone">
<!-- 调用录音机 -->
<!-- 不加上capture，则只会显示相应的，例如下三种依次是：拍照或图库，录像或图库，录像或拍照或图库， -->

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

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

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