用mui 调用手机拍照和图库上传照片

最新推荐文章于 2022-04-13 17:57:25 发布

jazhenglufang

最新推荐文章于 2022-04-13 17:57:25 发布

阅读量1.4k

点赞数 2

分类专栏：前端 mui

本文链接：https://blog.csdn.net/jazhenglufang/article/details/103358558

版权

本文介绍如何利用mui在HBuilder环境中调用手机的摄像头和图库，实现图片上传功能，并提供删除和查看图片的选项。请注意，此功能需在真机环境中运行才能访问手机硬件。

摘要由CSDN通过智能技术生成

用mui 调用手机拍照和图库上传照片，可对图片进行删除、查看、注意此功能必要在真机的运行环境下才可以调用手机摄像头和图库照片。

直接上代码：

<!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">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
		<title> </title>
	</head>
	<style>
		html,
			body {
   
				overflow:hidden;
				margin:0px;
				width:100%;
				height:100%;
				/*background-color: #efeff4;*/
				/* background:url(../img/123.png) repeat;
				background-size:cover; */
			}
			
			div.titles{
   
				margin:30px 10px 20px 10px;
				text-align: center;
			}
			h3{
   
			    line-height:1.5;
			}
			h5,p.leirong{
   
				color: #666;
				font-size: 17px;
			}
			
			.title {
   
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
			
			.mui-content > .mui-table-view:first-child {
   
				 margin-top: 0px; 
			}	
			
			.mui-table-view:before {
   
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.mui-table-view:after {
   
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			
		.mui-table-view-cell:after {
   
			position: absolute;
			right: 0;
			bottom: 0;
			left: 15px;
			height: 0px;
			content: '';
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #c8c7cc;
		}
		
		.mui-table-views {
   
		position: relative;
		margin-top: 0;
		margin-bottom: 0;
		padding-left: 0;
		list-style: none;
		
		}
		.mui-contents {
   
		background-color: #FFFFFF;
		opacity:0.8;
		float:inherit;
		margin: 45px  auto 45px auto;
		border: 1px solid #FFFFFF ;
		width: 90%;
		}
		
		/* .beijingtu{
			width: 100%;
			height: 100%;
			padding-top: 20px;
			padding-bottom: 100px;
		  
		} */
		 textarea{
   
			padding: 10px 15px;
		}
		
		.mui-input-row label {
   
		    font-family: 'Helvetica Neue', Helvetica, sans-serif;
		    line-height: 1.1;
		    float: left;
		    width: 40%;
		    padding: 11px 15px;
		}
		.mui-input-row label ~ input{
   
		    float: right;
		    width: 60%;
		    margin-bottom: 0;
		    padding-left: 0;
		    border: 0;
		}
		
		.mui-table-view-cell {
   
		    position: relative;
		    overflow: hidden;
		    padding: 7px 10px;
		    -webkit-touch-callout: none;
		}
		
		.mui-table-view-cell.mui-radio.mui-left {
   
		    padding-left: 5px;
		}
		
		/* 设置按钮在页面的某个位置而不随着滚动条随意滚动 */
		.virtual_body {
   
		    width:100%;
		    height:100%;
		    overflow-y:auto;