效果图

手机浏览器、微信打开该网页,都支持调用摄像头拍照和打开相册。

先看最终结果:

每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器。

点击“重新上传”,清空所有图片。

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 调用手机摄像头或相册并展示图片的更多相关文章

  1. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  2. html5调取手机摄像头或相册

    html5调用手机摄像头或者相册 由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在<a>中自己定义,这里我就不 ...

  3. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  4. 亲测可用)html5 file调用手机摄像头

    在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

  5. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  6. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

    接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...

  8. HTML5调用手机摄像机、相册功能 <input>方法

    最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了 ...

  9. h5调用手机摄像头/相册

    <!DOCTYPE HTML><html><head> <title>上传图片</title> <meta charset=" ...

随机推荐

  1. js异步解决方法

    在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作.在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有ht ...

  2. 15款好用超赞的chrome插件, 开发者们的必备~

    今天推荐一波Chrome插件干货.这些插件带给我开发效率上的提升.所以在这里整理一下,分享给朋友们. 作为一名程序开发者,推荐一波常用的chrome插件,用了就舍不得丢,包括免费FQ工具,github ...

  3. Set接口的使用

    Set集合里多个对象之间没有明显的顺序.具体详细方法请参考API文档(可见身边随时带上API文档有多重要),基本与Collection方法相同.只是行为不同(Set不允许包含重复元素). Set集合不 ...

  4. Linux平台 Oracle 19c RAC安装Part2:GI配置

    三.GI(Grid Infrastructure)安装 3.1 解压GI的安装包 3.2 安装配置Xmanager软件 3.3 共享存储LUN的赋权 3.4 使用Xmanager图形化界面配置GI 3 ...

  5. 【iOS】Xcode 离线文档

    Xcode 本身下载太慢…… Apple 官方文档地址:https://developer.apple.com/library/downloads/docset-index.dvtdownloadab ...

  6. java课堂_动手动脑4

    1.请运行以下示例代码StringPool.java,查看其输出结果.如何解释这样的输出结果?从中你能总结出什么? 答:在Java中,内容相同的字串常量(“Hello”)只保存一份以节约内存,所以s0 ...

  7. 夯实Java基础(一)——数组

    1.Java数组介绍 数组(Array):是多个相同类型元素按一定顺序排列的集合. 数组是编程中最常见的一种数据结构,可用于存储多个数据,每个数组元素存放一个数据,通常我们可以通过数组元素的索引来访问 ...

  8. kylin Retrieving hive dependency...

    由于公司环境配置hive默认连接hiveserver2 ,不管hive cli 还是beeline cli都默认使用beeline cli,连接hive需要输入账号密码; 启动kylin 时会Retr ...

  9. iOS的录屏功能

    iOS的录屏功能其实没什么好说的,因为网上的教程很多,但是网上的Demo无一例外几乎都有一个bug,那就是iPad上会出现闪退,这也体现了国内的教程文档的一个特点,就是抄袭,教程几乎千篇一律,bug也 ...

  10. kubernetes API服务器的安全防护

    12.1.了解认证机制 启动API服务器时,通过命令行选项可以开启认证插件. 12.1.1.用户和组 了解用户: 分为两种连接到api服务器的客户端: 1.真实的人 2.pod,使用一种称为Servi ...