移动Web拍照以及相册选择照片
在做移动web开发的时候经常遇到上传图片,一般两种方式,拍照和相册中选择。今天我们就来讲讲如何实现。
1.首先需要用到input标签
<input type="file" accept="image/*" onchange="changeImage(this)" multiple="multiple">
这里type选择file,accept限制选择文件的类型,这里是图片类型,*标识图片的后缀如:jpeg、png等 ,onchange监听选择图片的方法,multiple用于多文件上传的类型。
2.重写onchange方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="assets/mui/css/mui.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="assets/mui/js/mui.min.js"></script>
<script src="assets/zepto/zepto.min.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav my-header">
<h1 class="mui-title">拍照及相册</h1>
</header>
<div id="file-container">
<div class="item-div">
<span>x</span>
<input type="file" accept="image/*" onchange="changeImage(this)" multiple="multiple">
</div>
</div>
<div id="preDiv">
<div class="item-div"></div>
</div>
<script>
let count = 0;
function changeImage(ev) {
let file = ev.files[0];
//图片转base64
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function () {
if (count >= 3) {
alert("最多三张");
count = 3;
return;
}
//获取base64的图片
let result = this.result;
//动态创建元素设置图片背景
let divImage = $("<div></div>");
divImage.addClass("item-div");
divImage.css("background-image", "url(" + result + ")");
let spanImage = $("<span>x</span>");
spanImage.css("display", "inline-block");
divImage.append(spanImage);
$("#file-container").prepend(divImage);
//响应叉号的点击事件
spanImage.on("click", function () {
$(this).parent().remove();
//计数减减
count--;
//上传按钮显示
$("#file-container").children(".item-div:last-child").css("display", "inline-block");
});
count++;
//如果上传了三张就隐藏上传按钮
if (count === 3) {
$("#file-container").children(".item-div:last-child").css("display", "none");
}
};
//多次响应onchange,不然只会执行一次
$(ev).val("")
}
</script>
</body>
</html>
3.CSS样式
*{
margin: 0;
padding: 0;
}
#file-container{
margin-top: 44px;
width: 100%;
height: 85px;
background-size: cover;
padding: 10px 10px;
overflow: hidden;
}
.item-div{
height: 65px;
width: 65px;
background-image: url("../images/iconfont-tianjia.png");
background-size: 100% 100%;
display: inline-block;
position: relative;
margin-bottom: 10px;
margin-right: 10px;
border: none;
border-radius: 5px;
}
.item-div span{
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: red;
color: white;
right: 0;
top: 0;
text-align: center;
line-height: 20px;
display: none;
}
input{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 0;
}
#preDiv{
width: 100%;
height: 100%;
background: black;
opacity: 0.7;
position: relative;
top: 0;
left: 0;
display: none;
}
在onchange方法中,拿到选择的file,通过FileReader转为base64位的图片,然后再FileReader.onload加载完毕的方法中动态创建标签进行显示,最后将input的value值置为空,这是为了触发onchange方法执行多次。
这里用到了mui来控制在移动web的样式,用zepto相当于移动web端的jquery,用法和jquery完全相同。
好了,到这里移动web图片选择就讲完了,大家可以把这代码拷贝下来跑一跑。