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=" ...
随机推荐
- JS面向对象编程(一):封装
js是一门基于面向对象编程的语言. 如果我们要把(属性)和(方法)封装成一个对象,甚至要从原型对象生成一个实例,我们应该怎么做呢? 一.生成对象的原始模式 假定把猫看 ...
- “$Bitmap 有标记已使用的未用簇”
前几天在电脑上用 DiskGenius 给移动硬盘分区的时候出现了这个错误,如下图所示: 解决方法: 在 cmd 命令行窗口中输入如下代码: chkdsk /f /x c: PS: 其中 " ...
- Bean Validation完结篇:你必须关注的边边角角(约束级联、自定义约束、自定义校验器、国际化失败消息...)
每篇一句 没有任何技术方案会是一种银弹,任何东西都是有利弊的 相关阅读 [小家Java]深入了解数据校验:Java Bean Validation 2.0(JSR303.JSR349.JSR380)H ...
- Pyinstaller 打包工具的使用!!!
打包成一个文件夹: pyinstaller xxx.py 打包成单个文件: pyinstaller -F xxx.py 打包成不显示终端的单个文件: pyinstaller -F -w xxx.py ...
- Java经典编程题
[程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? //这是一个菲波拉契数列问题p ...
- 使用verilog编写锁存器与触发器
需要注意的地方有四点: 1.关于锁存器与触发器在原理上的不同点,以及代码的不同点 2.关于高电平有效与低电平有效之前的区别 3.理解实现复位与实现D触发器之间的区别 4.理解同步与异步之间的区别 锁存 ...
- Java集合系列(一)List集合
List的几种实现的区别与联系 List主要有ArrayList.LinkedList与Vector几种实现. ArrayList底层数据结构是数组, 增删慢.查询快; 线程不安全, 效率高; 不可以 ...
- Java性能调优的11个实用技巧
译文出处: ITeye 原文出处:dzone 大多数开发人员认为性能优化是个比较复杂的问题,需要大量的经验和知识.是的,这并不没有错.诚然,优化应用程序以获得最好的性能并不是一件容易的事情,但这 ...
- 在docker中开启新的container
当你在启动某个容器类型的时候 如果产生了类似的错误: docker: Error: No such image: b27f5dfcfc70c16d7b135889460def6b3f831bcc72 ...
- CSS: hack 方式一览
本文引自:http://blog.csdn.net/freshlover/article/details/12132801 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...