在移动端上传图片方法很简单,使用HTML5中的input:file供文件上传。

《一》常用属性值:

1、accept:规定文件上传来提交的文件类型,此属性只能和type:file配合使用

比如:

// 这里规定了只接受GIF和JPEG格式图像

如果不限制图像的格式,可以写成如下:

//不过其实应该避免使用该属性,应该在服务器端验证文件上传

2、multiple:多文件上传

《二》上传图片、视频、音频方法

// 调取图片

// 调取视频

// 调取音频

在使用上传文件或图片的时候,IOS和安卓的展现方式有点不同,多环境测试如下:

安卓:

【微信】: 有capture,调相机; 无capture,相册相机一起调

【QQ】: 有captrue,相册相机一起调; 无capture,调相册

【浏览器】: 有capture,调相机; 无capture,相册相机一起调

IOS:

【微信】: 有capture,调相机; 无capture,相册相机一起调

【QQ】: 有capture,调相机; 无capture,相册相机一起调

【浏览器】: 有capture,调相机; 无capture,相册相机一起调

上述可以看到,IOS表现一致,不加capture属性的时候,会同时调用相册和相机。

所以如果想要在任何环境下都同时调用相册和相机,只需要在实际开发过程中判断是否是安卓移动设备且处于QQ环境,然后手动添加capture属性即可。

那么,如何通过js判断呢?

《三》js判断当前页面是安卓还是IOS、是微信环境、QQ环境等等

【参考文章】

原文:https://www.cnblogs.com/wannananana/p/12031277.html

js调用android相册,【方法】移动端H5如何调用相册和相机上传图片、音频、视频...相关推荐

  1. JS如何调用Android原生方法

    一.引入 JSBridge JSBridge 主要是给 JavaScript 提供调用 Native 功能的接口,让混合开发中的前端部分可以方便地使用 Native 的功能(例如:通讯录.蓝牙). 而 ...

  2. unity3d调用android方法,Unity3D 调用Android原生方法2

    原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅Unity3D引擎技术交流QQ群:[119706192]本文链接地址:Unity3D 调用Android原生方法2 记一次Unity通过An ...

  3. 移动端H5如何调用相册和相机上传图片、音频、视频

    在移动端上传图片方法很简单,使用HTML5中的input:file供文件上传. <一>常用属性值: 1.accept:规定文件上传来提交的文件类型,此属性只能和type:file配合使用 ...

  4. JS(Javascript)调用Android原生方法三步走

    三步走: 1.webview 一定要设置这三个方法 webSetting.setJavaScriptEnabled(true); webSetting.setJavaScriptCanOpenWind ...

  5. uniapp调用android原生方法

    1.编写安卓端代码 public class ElitetycPluginTest extends StandardFeature {public void calcMyNameAddNum(IWeb ...

  6. Android方法调用实体类的值,React Native调用Android原生方法和传值

    8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 创建react native 项目:react-native init callAndroidProject cd ca ...

  7. 关于Html中jsp调用Android中方法无效的一点建议

    2019独角兽企业重金招聘Python工程师标准>>> 其实,后来我认真查找资料后,得知Android API 17及以上的版本,就会出现js调用不了android的方法.解决方案: ...

  8. h5调用Android 的方法

    方法 //JS交互 @JavascriptInterface public int H5Payment(String uid, String money, String cpid, String or ...

  9. 微信端H5页面调用分享接口

    最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加微信分享功能: 本文章主要是记录调用微信分享接口需要注意的事项: 1.前端用的angular1框架,首先需要在index页面引入微信接 ...

最新文章

  1. 微信小程序如何进行登录授权和获取用户信息
  2. 单片机c语言第三版答案,单片机C语言应用程序设计马忠梅课后习题答案
  3. SendTextMessage 等方便的消息发送函数
  4. 『码蛋』Android 周刊第1期
  5. arraylist 初始化_Java二维数组和动态数组ArrayList 类
  6. 【机器学习】L1正则化与L2正则化详解及解决过拟合的方法
  7. html嵌入war_WAR文件与具有嵌入式服务器的Java应用程序
  8. webpack 引入jquery和第三方jquery插件
  9. python特点 可移植性_下面的选项中,不属于Python特点的是( )_学小易找答案
  10. sql 视图不排序_算法工程师SQL进阶:神奇的自连接与子查询
  11. 4 数据操作+数据预处理
  12. druid Approximate Histograms
  13. 提供两个卡巴斯基的授权文件
  14. rockchip的pwm驱动框架
  15. 自然语言理解发展历程
  16. JavaWeb会话和会话技术之Cookie
  17. 机器学习--机器学习基础
  18. 笨方法学Python—ex42:对象、类及从属关系
  19. linux mtr 普通用户执行,Linux网站打开慢之mtr工具探测分析
  20. SitePoint播客40:Google的谷歌

热门文章

  1. 第3关:包装类与字符串之间的转换
  2. 虚拟创业云|BBC幼儿英语启蒙动画Nina and the Neurons妮娜和神经元
  3. Looop运行日本首座支持直流1500V电压的百万光伏电站
  4. 原生js封装picker地址三级联动方法
  5. codemirror主题效果概览
  6. CSDN写博客——去水印or自定义水印#解密CSDN上传图片生成链接的内容
  7. win7系统可以ping通局域网服务器 但是不能访问,win7系统无法访问局域网的解决方法...
  8. npm run dev 报错:bash: npm: command not found
  9. UnixLinux 索引
  10. dz3.2火车头 php接口,DiscuzX3.4论坛火车头采集器免登陆发布模块(带测试接口)-百度云...