input同时调起相机和相册，踩坑笔记

最近在做一个微信端h5的项目，要求同时调起手机相册和相机，写下近期踩过的坑。

一开始的想法肯定是直接用原生input标签

<input type="file" class="input">
复制代码

直接这样写就可以调起相册，因为并没有对它限定文件类型，所以此时的状态是既可以选择图片也可以选择文档。 产品要求对图片的格式进行限定，只支持jpg和png格式的图片

<input type="file" class="input" accept="image/png,image/jpeg">
复制代码

这时候问题来了，还是只能调起相册，无法调起相机，于是我又加上了capture输行

<input type="file" class="input" accept="image/jpg, image/jpeg" capture="camera">
复制代码

此时可以成功调起相机，但是也只能调起相机。多方尝试无果之后，我用了微信的接口choodeImage。用了极其繁琐的方式，首先取得localId，然后获取base64文件，然后巴拉巴拉。。。

然而，今天无意之中我发现了问题所在，当我这么写

<input type="file" class="input" accept="image/*">
复制代码

成功调起了相机和相册，所以关键点是：accept属性必须用“image/*”！！！对于图片格式，可以在change事件中进行判断。 我看到几乎所有的博客都提到了需要给安卓机配上capture才能调起相机，但是我试验的几台机子不需要加这个属性，如果加了就会直接调起相机。

如果还有问题会在后续补充。

转载于:https://juejin.im/post/5bdc19eff265da6163018319