好资源导航 » 文章资讯 » H5实现手机拍照和选择上传功能

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

2023-08-04 09:56:04 196

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

1.html/js代码：

/**拍照 *@param{Object}c *@param{Object}d */ varupload=function(c,d){ "usestrict"; var$c=document.querySelector(c), $d=document.querySelector(d), file=$c.files[0], picPath=$c.value, reader=newFileReader(); reader.readAsDataURL(file); reader.onload=function(e){ $d.setAttribute("src",e.target.result); }; localStorage.setItem('picPath',picPath); };

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端就是浏览文件上传，手机端可进行拍照功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐