效果图

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

先看最终结果:

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

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

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. python基础之元祖、嵌套,for循环、 enumerate、range的试用案例

    元祖又叫做只读列表,可循环查询.可切片,元祖里的直接元素不能更改,但是若里面有嵌套的列表,则可以修改列表里的元素 tu = (1,2,3,'sun',[3,4,5,'cat']) tu[4][3] = ...

  2. 【Android Studio】Gradle DSL method not found:'android()'

    如图所示: 参考:http://www.jianshu.com/p/d370d41fb7da 又遇到了这个问题: 参考:http://stackoverflow.com/questions/24204 ...

  3. 传输层的TCP和UDP协议

    作者:HerryLo 原文永久链接: https://github.com/AttemptWeb... TCP/IP协议, 你一定常常听到,其中TCP(Transmission Control Pro ...

  4. 作为前端的你,CC游戏开发可以上车

    1. 初来乍到 打开 Cocos Creator 点击新建空白项目,在默认布局的左下区域,一个黄黄assets文件夹映入眼帘.作为前端的你对这个文件是不是再熟悉不过了.是的,和你想象的一样,开发游戏中 ...

  5. Python学习系列(三)Python 入门语法规则1

    一.注释 ''' 多行注释 ''' #单行注释 '''    #example1.1 测试程序  时间:4/17/2017 i1=input("请输入用户名:") i2=input ...

  6. 【Java例题】7.6文件题3-文本文件统计

    6.文本文件统计.已有一个文本文件文件,请统计数字.大写字母.小写字母.汉字及其它字符出现的次数:然后将这些次数由大到小写到另一个文件之中.说明:将次数为零的过滤掉排序 package chapter ...

  7. 使用Yapi展示你的api接口

    今天研究了下一款非常好用的api集中展示工具---Yapi,具体网址 https://hellosean1025.github.io/yapi/documents/index.html 如图,看下基本 ...

  8. CodeGlance右侧窗口缩略图消失不见

    说明下问题,idea中的CodeGlance插件会在右侧显示缩略图,可以快速定位代码.今天遇到个问题升级了插件后右侧窗口消失.经过卸载插件,重启,reset一系列操作后还是没能恢复. 能去搜索引擎搜索 ...

  9. MySQL学习随笔记录

    安装选custmer自定义安装.默认安装全部在c盘.自定义安装的时候有个advance port选项用来选择安装目录. -----------------------MySQL常见的一些操作命令--- ...

  10. Git使用(码云)

    1.安装git软件(码云/GitHub) 2.码云注册,保存代码 3.创建代码托管仓库,仓库名相当于码云上的文件夹 4.写作业并提交 在作业文件夹上,右键选择‘get bash here’ 在黑框里输 ...