<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拍照上传</title>
<style>
#preview {
padding: 1px;
box-sizing: border-box;
width: 140px;
height: 140px;
border: 2px dashed #fff;
background-color: #0d7bc9;
border-radius: 50%;
margin-top: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#preview img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
#face-box {
display: flex;
flex-direction: column;
align-items: center;
}
#label-file {
font-size: 14px;
padding: 10px 30px;
color: #ffff;
text-align: center;
border-radius: 50px;
border: none;
background-color: #0d7bc9;
width: 200px;
height: 30px;
line-height: 30px;
margin-top: 100px;
}
#uploadImg {
display: none;
}
</style>
</head>
<body>
<div id="face-box">
<div class="photo" id="preview"></div>
<label for="uploadImg" id="label-file">拍照</label>
<input type="file" accept="image/*" id="uploadImg" capture="camera" name="uploadImg">
</div>
</body>
</html>
<script>
var uploadImg = document.getElementById('uploadImg'),
preview = document.getElementById('preview'),
btnSubmit = document.getElementById('btnSubmit'),
imgurl = '';
uploadImg.addEventListener('change', handleFileImg, false);
// 拍照选择完成的回调
function handleFileImg() {
getImgSrc().then((res) => {
submitImg(res,getQueryString('uploadKey'));
})
}
function getImgSrc() {
return new Promise((resolve, reject) => {
// 为了获取图片的本地路径
window.URL = window.URL || window.webkitURL;
// 获取移动端类型Android iPhone ipad
var sUserAgent = navigator.userAgent.toLowerCase();
// 获取当前图片信息（单张图片上传）
var selected_file = uploadImg.files[0];
if (sUserAgent.match(/android/i) == "android") {
var img = new Image();
// 生成一个本地图片展示路径
img.src = window.URL.createObjectURL(selected_file);
preview.innerHTML = '';
// 添加到页面展示
preview.appendChild(img);
var reader = new FileReader();
reader.onload = function (e) {
imgurl = e.target.result;
resolve(imgurl);
};
reader.readAsDataURL(selected_file);
} else {
//判断文件类型是否为图片
if (!selected_file.type.match(/image.*/)) return false;
var img = document.createElement('img');
// base64赋值
img.file = selected_file;
preview.innerHTML = '';
preview.appendChild(img);
img.onload = function () {
imgurl = img.src;
resolve(imgurl);
};
var reader = new FileReader();
reader.onload = function (e) {
img.src = e.target.result;
};
reader.readAsDataURL(selected_file);
}
})
}
// 上传base64编码到后台
function submitImg(img,key) {
var start = img.indexOf(',') + 1;
var params ="imgBase64=" + encodeURIComponent(img.substr(start)) +"&uploadKey=" + key;
var url = '后台地址'
var xhr = new XMLHttpRequest();
xhr.open('post', url);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
if(xhr.responseText){
var res = JSON.parse(xhr.responseText);
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if(res.code == 200){
alert('上传成功,请再PC端操作！')
if (!isWeixin) {
window.opener=null;
window.open('','_self','');
window.close()
}else{
setInterval(()=>{
WeixinJSBridge.call("closeWindow")
},300)
}
}else{
alert('上传失败,重新扫描上传')
}
}
console.log(res)
}
}
xhr.send(params);
}
/**
*
* @param {*} name 地址栏参数名
* @returns
*/
function getQueryString(name){
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)",'i');
var res = window.location.search.substr(1).match(reg);
if(res[2]){
return res[2];
}else{
return null;
}
}
</script>
