资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/H5(移动端)前端使用input type=file 上传图片，调用相机和相册

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

kgbook / 2068人阅读

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

</>复制代码

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

input 有 captrure属性，取值：camera：相机；camcorder：摄像；microphone：录音

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

结果如下：

</>复制代码 
  1. 1. 安卓： 
  2. 【微信】：  有capture，调相机；         无capture，相册相机一起调
  3. 【QQ】：    有captrue，相册相机一起调； 无capture，调相册
  4. 【浏览器】：有capture，调相机；         无capture，相册相机一起调
  5. 2. IOS
  6. 【微信】：  有capture，调相机；  无capture，相册相机一起调
  7. 【QQ】：    有capture，调相机；  无capture，相册相机一起调
  8. 【浏览器】：有capture，调相机；  无capture，相册相机一起调

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

而在Android上 QQ表现不一致，于是在实际开发中，我们只需要判断

</>复制代码 
  1. if (isAndroid && type === "qq") {
  2.     this.$refs.uploadFile.setAttribute("capture", "camera");
  3. }

over！

GPU云服务器 云服务器 H5移动端上传图片 移动端webrtc h5 H5图片压缩上传 jquery_input_type

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

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

相关文章

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

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

    hidogs 评论0 收藏0

发表评论

登陆后可评论

0条评论

kgbook

男|高级讲师
我要私信

TA的文章

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