栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

H5实现手机拍照和选择上传功能

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

H5实现手机拍照和选择上传功能

本文实例为大家分享了H5手机拍照和选择上传的具体代码,供大家参考,具体内容如下

1. html/ js代码:


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
 

2. 参数解析:

 1. accept 属性(允许上传两种文件类型:gif 和 jpeg)  
 2. capture 捕获到系统默认的设备,有三个参数值可设置
 3. camera--照相机;camcorder--摄像机; microphone--录音  
 4. js代码做了封装, 参数一表示 "选择文件"的 id,参数二表示 "显示图片" 的 id,
 5. 若是 ios 只能调用摄像头,不能选择打开相册的话,就把这个【capture="camera"】去掉,直接加一个属性 multiple
 6. file 表示你选中的那个图片,然后它里面有几个属性 name、size、type、slice等,也都非常实用,
 7. FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
 8. 调用 FileReader 的 readAsDataURL 接口,将启动异步加载文件内容,通过给 reader 监听一个 onload 事件,
 9. 将数据加载完毕后,在onload事件处理中,通过 event 的 result 属性即可获得文件内容,然后扔进 img 的 src 即可 打开图片并预览。

3. 效果展示:

点击拍照的图标,如果在web端就是浏览文件上传,手机端可进行拍照功能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/71998.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号