0
点赞
收藏
分享

微信扫一扫

HTML5+规范API-系统相册获取功能

小磊z 2022-04-25 阅读 67

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<button type="button" class="mui-btn mui-btn-blue" id="pick">按钮</button>
	<img src="" id="myimg" width="100%">
	<script type="text/javascript">
		// 从相册中选择图片
		var pick = document.getElementById("pick");
		
		// 绑定点击事件(单图)
		pick.addEventListener("tap",function(){
			plus.gallery.pick(function(filepath){
				var myimg = document.getElementById("myimg");
				myimg.src = filepath;  // 只选择一张图片时,filepath就是图片的路径
			},function(error){
				alert(error.message);
			})
		})
		
		// 绑定点击事件(多图)
		// pick.addEventListener("tap",function(){
		// 	plus.gallery.pick(function(e){
		// 		console.log(e.files); // e.files包括选中的所有图片的路径
		// 	},function(error){
		// 		alert(error.message);	
		// 	},{
		// 		multiple:true,  // 开启选择多个图片
		// 	})
		// })
	</script>
</body>
</html>

效果展示
第一步:点击拍照按钮
在这里插入图片描述
第二步:从系统相册中选择图片
在这里插入图片描述

举报

相关推荐

0 条评论