资讯专栏INFORMATION COLUMN

H5(移动端)前端使用input type=file 上传图片,调用相机和相册

hidogs / 868人阅读

摘要:在移动端页面使用上传文件或者图片时,和安卓的展现方式有很多不一样。

在移动端页面使用上传文件或者图片时,IOS和安卓的展现方式有很多不一样。

inputcaptrure属性,取值:camera:相机;camcorder:摄像;microphone:录音

在安卓想要调用相机需要添加capture属性,于是我在IOSAndroid上进行了三端测试!

结果如下:

1. 安卓: 
【微信】:  有capture,调相机;         无capture,相册相机一起调
【QQ】:    有captrue,相册相机一起调; 无capture,调相册
【浏览器】:有capture,调相机;         无capture,相册相机一起调

2. IOS
【微信】:  有capture,调相机;  无capture,相册相机一起调
【QQ】:    有capture,调相机;  无capture,相册相机一起调
【浏览器】:有capture,调相机;  无capture,相册相机一起调

我们可以看见,IOS表现行为一致,只要不加capture就可正常使用

而在AndroidQQ表现不一致,于是在实际开发中,我们只需要判断

if (isAndroid && type === "qq") {
    this.$refs.uploadFile.setAttribute("capture", "camera");
}

over!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100013.html

相关文章

  • H5(移动)前使用input type=file 上传图片调用相机相册

    摘要:在移动端页面使用上传文件或者图片时,和安卓的展现方式有很多不一样。 在移动端页面使用上传文件或者图片时,IOS和安卓的展现方式有很多不一样。 input 有 captrure属性,取值:camera:相机;camcorder:摄像;microphone:录音 在安卓想要调用相机需要添加capture属性,于是我在IOS和Android上进行了三端测试! 结果如下: 1. 安卓: 【...

    kgbook 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<