js 调用手机摄像头或相册并展示图片
效果图
手机浏览器、微信打开该网页,都支持调用摄像头拍照和打开相册。
先看最终结果:
每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器。
点击“重新上传”,清空所有图片。
PC浏览器打开,类似,不过只能选择图片文件:
代码
把input type=file的标签透明度设置为0,使用绝对布局的方式用另一个标签覆盖它:
<div id="imgPreview">
<div id="prompt3">
<div id="imgSpan">
点击上传
</div>
<input type="file" id="file" class="filepath" onchange="changepic()" accept="image/*">
<button id="imgSpan" type="button" onclick="clearpic()">重新上传</button>
</div>
@*此处用js自动插入图片标签<img src="" id="img3" />*@
</div>
获取到图片以后在前端展示图片:
function changepic() {
var reads = new FileReader();
f = document.getElementById('file').files[0];
savePic(f); --》》 保存图片,上传服务器
reads.readAsDataURL(f);
reads.onload = function (e) {
var y = document.createElement('img');
y.id = "img3";
y.src = this.result;
$("#imgPreview").append(y);
};
};
上传服务器:
function savePic(file) {
var formData = new FormData();
formData.append('file', file); $.ajax({
url: "https://www.aaaa.com/fileupload",
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
var picId = JSON.parse(data).atts[0].id; -->> 解析服务器返回的json字符串,取出其中的Id
alert("返回值id为:"+picId);
},
error: function (data) {
alert("上传失败");
}
});
}
通过遍历删除第一个以外的所有标签(第一个标签是上传和清空的按钮):
function clearpic() {
var x = document.getElementById('imgPreview');
var count = x.childElementCount;
alert(count);
for (var i = 1; i < count;i++) {
x.removeChild(x.children[1]);
}
};
css 样式:
#imgPreview {
width: 100%;
height: 120px;
margin: 10px auto 0px auto;
border: 0.5px solid #ced4da;
text-align: left;
vertical-align: central;
} #prompt3 {
height: 30px;
width: 200px;
position: relative;
} #imgSpan { -》》 两个按钮的样式
position: relative;
height: 30px;
background: #fff; /*#ccc;*/
border: 1px solid #333;
left:;
top: 1px;
padding: 5px 10px;
overflow: hidden;
text-decoration: none;
text-indent:;
line-height: 20px;
border-radius: 20px;
color: #333;
font-size: 13px;
display: inline;
} .filepath {
position: absolute; -》》绝对布局
left:;
top:;
height: 30px;
width: 80px;
opacity:; -》》 透明度设置为0,即隐藏
} #img3 {
position: relative;
height: 90px;
width: 90px;
padding: 2px;
display: inline; -》》inline是为了让所有图片不换行
}
js 调用手机摄像头或相册并展示图片的更多相关文章
- 使用HTML5+调用手机摄像头和相册
前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...
- html5调取手机摄像头或相册
html5调用手机摄像头或者相册 由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在<a>中自己定义,这里我就不 ...
- html5调用手机摄像头,实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- 亲测可用)html5 file调用手机摄像头
在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api 然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...
- 怎样让HTML5调用手机摄像头拍照——实践就是一切
原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...
- HTML5调用手机摄像头,仅仅支持OPPOHD浏览器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码
接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...
- HTML5调用手机摄像机、相册功能 <input>方法
最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了 ...
- h5调用手机摄像头/相册
<!DOCTYPE HTML><html><head> <title>上传图片</title> <meta charset=" ...
随机推荐
- Oracle导入dump文件
imp USER/PASSWORD@host/DB_name file=xxx.dmp(path) full=y ignore=y
- .net持续集成sonarqube篇之 sonarqube集成单元测试
系列目录 通过前面章节我们可以看到,不论怎么构建,单元测试覆盖率一栏总是0% 这是因为单元测试覆盖率报告需要额外集成.这一节我们就讲解如何在sonarqube里集成单元测试覆盖率报告. 这里需要借助O ...
- 摘录C#代码片段
1.保存数据到指定文件String response = "";//数据 byte[] bytes = response.getBytes();//转化Byte string fi ...
- 7kyu (难度系数kyu阶段数值越大难度越低) 数组分组及求和
几个人排成一排,分成两队.第一个人进入一队,第二个人进入第二队,第三个人进入第一队,以此类推. 给定一个正整数的数组(人的权重),返回两个整数的新数组/元组,其中第一个是第1组的总重量,第二个是第2组 ...
- iOS开发 8小时时差问题
今天调试遇到时间计算的问题,发现怎么算都会有差别,后来仔细观察,发现有8小时的时差…… 这篇文章解释的很好,用到了,因此记之. ios有关时间打印出来差8小时的问题
- Windows上的Linux容器
翻译自:https://docs.microsoft.com/en-us/virtualization/windowscontainers/deploy-containers/linux-contai ...
- SpringBoot:Mybatis + Druid 数据访问
西部开源-秦疆老师:基于SpringBoot 2.1.7 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! 简介 对于数据访问层 ...
- 100天搞定机器学习|Day19-20 加州理工学院公开课:机器学习与数据挖掘
前情回顾 机器学习100天|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机 ...
- (二十六)c#Winform自定义控件-有确定取消的窗体(二)
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...
- 部分APP无法代理抓包的原因及解决方法
引言 HTTP应用层的抓包已经成为日常工作测试与调试中的重要一环,最近接触新项目突然之间发现之前的抓包手段都不好使了,顿时模块与模块之间的前端与服务之间的交互都变成了不可见,整个人都好像被蒙住了眼睛. ...