• input[type=file]标签 本地文件、拍照、录像 上传的兼容性问题


    移动端 input[type=file]标签 本地文件、拍照、录像 上传的兼容性问题: https://blog.csdn.net/sinat_35538827/article/details/85997205 或 https://blog.csdn.net/weixin_34101229/article/details/88696293

    问题描述:移动端上传文件,可以选择  本地文件、拍照、录像、录音。但是他们不是同时可以选择的,不同的手机还是有差异的。

    一、input[type=file] 属性:https://blog.csdn.net/sinat_35538827/article/details/85997205

      三个属性:

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

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

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

    二、不同环境中  input[type=file] 不同属性对应的效果:(主要的运行环境:ios浏览器、ios微信网页、安卓浏览器、安卓微信网页)

      1、<input type="file">

    ios浏览器 ios微信 安卓浏览器(左边小米手机,右边魅族手机) 安卓微信

    (和ios浏览器上一样的)

     

     (不同是安卓系统,本身就有差异)

    小米手机:直接进入文件系统,没有弹出选项

    魅族手机:直接进入文件系统,没有弹出选项

    (两者的行为是一样的)

      2、<input type="file" capture="camera">   【一般都是,直接调用对应的设备 进行获取文件。也有手机会不一样,类似下面的魅族手机】

    ios浏览器 ios微信 安卓浏览器 安卓微信
    直接进入拍照或录像的功能里

    直接进入拍照或录像的功能里

    (和ios浏览器是一样的)

    小米手机:直接进入拍照功能,但是不能录像

    魅族手机:弹出选项,如下

     

    小米手机:直接进入文件系统,没有弹出选项

    魅族手机:直接进入文件系统,没有弹出选项

    (两者的行为是一样的)

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

         

    ios浏览器 ios微信 安卓浏览器(小米、魅族) 安卓微信

    (和ios浏览器是一样的)

     

    (两者的行为是一致的) 

    (两者的行为是一致的)

    4、<input type="file" accept="image/*" capture="camcorder">

      accept 和 capture 两者冲突,以accept为准

    个人得出结论:

      ios上基本表现一致,且根据属性设置。可以实现定制,拍照和录像  是  都有还是  选择其一

      安卓机上就有很大差异,大部分的安卓机都是不能实现 弹出窗上同时有  拍照和录像 功能的。 如果要实现 拍照和录像功能都可以的话,弹出选择的组件使用H5自己写。选择选项后,js对 input[type=file] 标签的属性修改。如,

      点击自定义的拍照选项后,直接跳到拍照功能(不弹出原生的选项组件)。

    三、小程序中的H5的 input[type=file] 和 微信H5页面的表现也是不一样的。

      安卓微信小程序中 要调用 拍照或录像 必须设置  capture="camera" 属性,且直接进入拍照或 录像中。

    ios微信小程序 安卓微信小程序
    拍照录像上传文件可以正常定制

    没有选项弹出,要么直接到文件列表,要么只能拍照或录像

  • 相关阅读:
    hihocoder 1489(微软2017, 数学,模拟)
    图论——迪杰斯特拉算法(Dijkstra)实现,leetcode
    DFS,BFS 练习(深搜,广搜,图,leetcode)
    什么是渗透测试?黑客安全专家郭盛华这样说
    为什么印度容易遭受网络黑客攻击?
    郭盛华年收入5000万是真的吗?
    警方突袭德国间谍软件公司
    苹果推出首款5G手机,相机功能比单反还要牛?
    苹果推出iPhone 12,价格比你想象中更实惠
    韩国AI半导体技术,为何能问鼎世界第一?
  • 原文地址:https://www.cnblogs.com/wfblog/p/12887737.html
Copyright © 2020-2023  润新知