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 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
Javascript 二维数组
2009/11/26 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python中特殊函数集锦
2015/07/27 Python
python编写分类决策树的代码
2017/12/21 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
python使用建议技巧分享(三)
2020/08/18 Python
加热夹克:RAVEAN
2018/10/19 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
空指针到底是什么
2012/08/07 面试题
教育科研先进个人材料
2014/01/26 职场文书
采购意向书范本
2014/03/31 职场文书
导师推荐信范文
2014/05/09 职场文书
求职信的正确写法
2014/07/10 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
婚礼答谢词范文
2015/09/29 职场文书