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


Posted in Javascript onDecember 18, 2019

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

1. html/ js代码:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <meta http-equiv="Access-Control-Allow-Origin" content="*" />
 <link rel="stylesheet" href="../../css/mui.min.css" >
 <link rel="stylesheet" type="text/css" href="../../css/app.css" />
 <link rel="stylesheet" type="text/css" href="../../css/icons-extra.css" />
 <link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" >
 </head>
 <body onload="startTime()">
 <div class="mui-card" style="height: 20%;">
 <div class=" mui-card-media">
 <img class="a" id="img" />
 <label for="myFile">
 <span id="format" class="a mui-icon mui-icon-camera" style="font-size: -webkit-xxx-large;"></span>
 </label>
 <input style="display: none;" type="file" capture="camera" id="myFile" onchange="upload('#myFile', '#img');" />
 </div>
 </div>

 <script src="../../js/mui.js"></script>
 <script src="../../js/mui.picker.min.js"></script>
 <script src="../../js/host.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript"> 
 /**拍照
 * @param {Object} c
 * @param {Object} d
 */
 var upload = function(c, d) {
 "use strict";
 var $c = document.querySelector(c),
 $d = document.querySelector(d),
 file = $c.files[0],
 picPath = $c.value,
 reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = function(e) {
 $d.setAttribute("src", e.target.result);
 };
 localStorage.setItem('picPath', picPath);
 };
 </script>
</html>

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 #Javascript
js实现上传图片并显示图片名称
Dec 18 #Javascript
js实现多图和单图上传显示
Dec 18 #Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 #Javascript
微信小程序实用代码段(收藏版)
Dec 17 #Javascript
微信小程序修改数组长度的问题的解决
Dec 17 #Javascript
微信小程序利用云函数获取手机号码
Dec 17 #Javascript
You might like
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
js 函数的副作用分析
2011/08/23 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
python中from module import * 的一个坑
2014/07/20 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
英文自我鉴定
2013/12/10 职场文书
幼儿教师培训感言
2014/03/08 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
小学班主任评语
2014/12/29 职场文书
导游词之上海豫园
2019/10/24 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python