h5 实现调用系统拍照或者选择照片并预览-阿里云开发者社区

开发者社区> keller.zhou> 正文

h5 实现调用系统拍照或者选择照片并预览

简介: 调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的, 每当看到这块功能的时候,前端的小伙伴就得去找各种各样的插件。
+关注继续查看

调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的,

每当看到这块功能的时候,前端的小伙伴就得去找各种各样的插件。除非你收藏了什么好东西,或者是你收藏了什么比较旧的、需求跟不上的好东西,需求不一样体验不好 那你提交了,产品经理会买你账吗?

好了,咱入正题!

这里主要是针对手机端页面或者webApp的,pc端页面效果欠佳(有时候点击选择按钮,弹框要等你上完厕所才能弹得出来)

这里分两块代码,分别为 html 和 js

HTML

<input id="fileBtn" type="file" onchange="upload('#fileBtn', '#img');" accept="image/*" capture="camera"/>
<img src="" id="img"/>
# 解析
# accept 属性(允许上传两种文件类型:gif 和 jpeg)
# capture 捕获到系统默认的设备,有三个参数值可设置  camera--照相机; camcorder--摄像机; microphone--录音
# js代码我做了封装, 参数一表示 "选择文件" 的 id,参数二表示 "显示图片" 的 id,
# 若是 ios 只能调用摄像头,不能选择打开相册的话,就把这个【capture="camera"】去掉,直接加一个属性 multiple

js

var upload = function(c, d){
    "use strict";
    var $c = document.querySelector(c),
        $d = document.querySelector(d),
        file = $c.files[0],
        reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
        $d.setAttribute("src", e.target.result);
    };
};

# 解析
# 参数在上面 HTML 就已经讲解了,
# file 表示你选中的那个图片,然后它里面有几个属性 name、size、type、slice等,也都非常实用,

# FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
# 调用 FileReader 的 readAsDataURL 接口,将启动异步加载文件内容,通过给 reader 监听一个 onload 事件,
# 将数据加载完毕后,在onload事件处理中,通过 event 的 result 属性即可获得文件内容,然后扔进 img 的 src 即可 打开图片并预览。

这个对于前端来说是非常实用的,

不过点击选择文件这个按钮选择系统文件的时候弹出的操作菜单,是依赖你所使用的浏览器的,建议还是用 微信 来测试(最佳),而如果你刚好要弄微信端的页面,

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
php中使用exec,system等函数调用系统命令
php的内置函数exec,system都可以调用系统命令(shell命令),当然还有passthru,escapeshellcmd等函数。   在很多时候利用php的exec,system等函数调用系统命令可以帮助我们更好更快的完成工作。
683 0
性能测试工具选择策略——仿真度对比测评分析报告
基于 AI 的软件自动化测试工具的特征介绍
704 0
分布式调用跟踪系统的设计和应用学习
随着分布式服务架构的流行,特别是微服务等设计理念在系统中的应用,业务的调用链越来越复杂,一个请求可能会涉及到几十个服务的协同处理, 牵扯到多个团队的业务系统,那么如何快速准确的定位到线上故障?缺乏一个自上而下全局的调用id,如何有效的进行相关的数据分析工作?
9941 0
+关注
121
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载