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

用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;
		    overflow-x:auto;
		/* 	margin-bottom: 40px; */
		}
		
		#fixed_div {
		    position:absolute;
		    z-index:2008;
		    bottom:10px;
		    right:40px;
		    height:40px;
		
		   /* border:1px solid red;
		    background:#e5e5e5; */
		}
		/* 图片的样式 */
		.head {
			height: 40px;
		}
		#head {
			line-height: 40px;
		}
		.head-img {
			width: 40px;
			height: 40px;
		}
		#head-img1 {
			position: absolute;
			bottom: 10px;
			right: 40px;
			width: 40px;
			height: 40px;
		}
		
		.feedback .image-list {
					width: 100%;
					height:auto;
					background-size: cover;
					padding: 10px 10px;
					overflow: hidden;
				}
				.feedback .image-item {
					width: 65px;
					height: 65px;
					/*background-image: url(../images/iconfont-tianjia.png);*/
					background-size: 100% 100%;
					display: inline-block;
					position: relative;
					border-radius: 5px;
					margin-right: 10px;
					margin-bottom: 10px;
					border: solid 1px #e8e8e8;
					vertical-align: top;
				}
				.feedback .image-item .file {
					position: absolute;
					left: 0px;
					top: 0px;
					width: 100%;
					height: 100%;
					opacity: 0;
					cursor: pointer;
					z-index: 0;
				}
				.feedback .image-item.space {
					border: none;
				}
				.feedback .image-item .image-close {
					position: absolute;
					display: inline-block;
					right: -6px;
					top: -6px;
					width: 20px;
					height: 20px;
					text-align: center;
					line-height: 20px;
					border-radius: 12px;
					background-color: #FF5053;
					color: #f3f3f3;
					border: solid 1px #FF5053;
					font-size: 9px;
					font-weight: 200;
					z-index: 1;
				}
				.feedback .image-item .image-up{
					height: 65px;
					width: 65px;
					border-radius: 10px;
					line-height: 65px;
					border: 1px solid #ccc;
					color: #ccc;
					display: inline-block;
					text-align: center;
				}
				.feedback .image-item .image-up:after{
					font-family: "微软雅黑";
					content: '+';
					font-size: 60px;
				}
				.feedback .image-item.space .image-close {
					display: none;
				}
		
				.feedback .row {
					width: 100%;
					background-color: #fff;
				}
	</style>
	<body>
		<div class="virtual_body">
			<div style="height:888px;">
				
		<!-- 标题 -->
		<!-- <header id="headerid" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 
			<h1 class="mui-title">考察</h1>
		</header> -->
		<div class="beijingtu">
			<div class="mui-contents  feedback">
				<ul class="mui-table-views">
					<li class="mui-table-view-cell mui-radio mui-left" >
						<p>图片</p>
						<div id="image-list0" class="row image-list"></div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	</div>	
	</body>
	
	<script src="js/mui.js"></script>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
	<script>
		mui.init();
		    (function() {
		        var index = 1;
				var count = 1;//每行文件个数
		        var size = null;
		        var imageIndexIdNum = 0;
		        var feedback = {};
		        feedback.files = [];
		        mui.plusReady(function() {
		            //设备信息,无需修改
		            feedback.deviceInfo = {
		                appid: plus.runtime.appid,
		                imei: plus.device.imei, //设备标识
		                images: feedback.files, //图片文件
		                p: mui.os.android ? 'a' : 'i', //平台类型,i表示iOS平台,a表示Android平台。
		                md: plus.device.model, //设备型号
		                app_version: plus.runtime.version,
		                plus_version: plus.runtime.innerVersion, //基座版本号
		                os:  mui.os.version,
		                net: ''+plus.networkinfo.getCurrentType()
		            }
		        });
				feedback.getFileInputArray = function(idx) {
					return [].slice.call(document.getElementById('image-list'+idx).querySelectorAll('.file'));
				};
				
				/* 拍照添加一张图片 */
				feedback.addFile = function(idx,path) {
					var parentObj = {id:"imagesList"+idx};
					var childObj = {name:"images"+count,path:path,id:"img-"+count};
					parentObj.childs = childObj;
					feedback.files.push(parentObj);
					count++;
				};
				
				/**
				 * 相册多选
				 */
				feedback.addMoreFile = function(count, j, path) {
					
					var parentObj = {id:"imagesList"+count};
					var childObj = {name:"images"+count,path:path,id:"img-"+count};
					parentObj.childs = childObj;
					feedback.files.push(parentObj);
					count = count + j;
				};
		        /**
		         * 初始化图片域占位
		         */
		        feedback.newPlaceholder = function() {
		            mui(".image-list").each(function (idx,element) {
						var fileInputArray = feedback.getFileInputArray(idx);
						if (fileInputArray &&
							fileInputArray.length > 0 &&
							fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
							return;
						};
		                imageIndexIdNum++;
		                var placeholder = document.createElement('div');
		                placeholder.setAttribute('class', 'image-item space');
		                var up = document.createElement("div");
		                up.setAttribute('class','image-up')
		                //删除图片
		                var closeButton = document.createElement('div');
		                closeButton.setAttribute('class', 'image-close');
		                closeButton.innerHTML = 'X';
		                closeButton.id = "img-"+count;
		                //小X的点击事件
		                closeButton.addEventListener('tap', function(event) {
		                    setTimeout(function() {
		                        for(var temp=0;temp<feedback.files.length;temp++){
									var strs= "imagesList"+idx;
									if(feedback.files[temp].id==strs){
										if(feedback.files[temp].childs.id==closeButton.id){
										    feedback.files.splice(temp,1);
										}
									}
		                        }
								document.getElementById('image-list'+idx).removeChild(placeholder);
		                        
		                    }, 0);
		                    return false;
		                }, false);
		                var fileInput = document.createElement('div');
		                fileInput.setAttribute('class', 'file');
		                fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
		                fileInput.addEventListener('tap', function(event) {
							var self = this;
							var indexsd = (this.id).substr(-1);//每个加号
							var btnArray = [{
								title: "拍照"
							}, {
								title: "从相册选择"
							}];
							plus.nativeUI.actionSheet({
								title: "选择照片",
								cancel: "取消",
								buttons: btnArray
							}, function(e) {
								var index = e.index;
								switch (index) {
									case 0:
										break;
									case 1:
										var cmr = plus.camera.getCamera();
								        cmr.captureImage(function(p) {
								            plus.io.resolveLocalFileSystemURL(p, function(entry) {
								                plus.zip.compressImage({
								                    src: entry.toLocalURL(),
								                    dst: '_doc/camera/' + p,
								                    overwrite: true,
								                    format: "jpg",
								                    width: "30%",
								                }, function(zip) {
								                    if(zip.size > (1 * 1024 * 1024)) {
								                        return mui.toast('文件超大,请调整相机重新拍照');
								                    }
								                    if (!self.parentNode.classList.contains('space')) { //已有图片
								                    	feedback.files.splice(indexsd-1,1,{id:"image-list"+idx,childs:{name:"images"+count,path:e}});
								                    } else { //加号
								                    	placeholder.classList.remove('space');
								                    	feedback.addFile(idx, zip.target);
														//feedback.addMorePicture(count,idx,zip);
								                    	feedback.newPlaceholder();
								                    }
								                    up.classList.remove('image-up');
								                    placeholder.style.backgroundImage = 'url(' + zip.target + ')';
								 
								                }, function(zipe) {
								                    plus.nativeUI.closeWaiting();
								                    mui.toast('压缩失败!')
								                });
								            }, function(e) {
								                plus.nativeUI.closeWaiting(); //获取图片失败,loading框取消
								                mui.toast('失败:' + e.message); //打印失败原因,或给出错误提示
								            });
								        }, function(e) {
								            plus.nativeUI.closeWaiting(); //开启照相机失败,关闭loading框
								            mui.toast('失败:' + e.message); //打印错误原因,给出错提示
								        }, {
								            filename: '_doc/camera/', //图片名字
								            index: 1 //摄像头id
								        });
										break;
									case 2:
									plus.gallery.pick(function(e) {
										for(var i in e.files) {
											var fileSrc = e.files[i];
											var name = fileSrc.substr(fileSrc.lastIndexOf('/') + 1);
											plus.zip.compressImage({
												src: fileSrc,
												dst: '_doc/' + name,
												overwrite: true,
												quality: 50
											}, function(zip) {
												size += zip.size
												if (size > (10*1024*1024)) {
													return mui.toast('文件超大,请重新选择~');
												}
												if (!self.parentNode.classList.contains('space')) { //已有图片
													feedback.files.splice(indexsd-1,1,{id:"image-list"+idx,childs:{name:"images"+count,path:e}});
													feedback.addMorePicture(count,idx,zip);
												} else { //加号
														console.log(i+'=='+idx+'=='+count);
													//placeholder.classList.remove('space');
													feedback.addMoreFile(idx, i, zip.target);
													feedback.addMorePicture(count,idx,zip);
													feedback.newPlaceholder();
												}
											}, function(zipe) {
												mui.toast('压缩失败!')
											});
										}
										feedback.newPlaceholder();

									}, function(e) {
										mui.toast(e.message);
									},{
										filter: "image",
										multiple: true, 
										maximum: 5, 
										system: false,
										onmaxed: function() {
										    plus.nativeUI.alert('最多只能选择5张图片'); 
										}
									});
									break;
								}
							});
		                    
		                }, false);
		                placeholder.appendChild(closeButton);
		                placeholder.appendChild(up);
		                placeholder.appendChild(fileInput);
		                document.getElementById('image-list'+idx).appendChild(placeholder);
		            });
		
		        }
				
				feedback.addMorePicture = function(flag, idx, zip) {
					var placeholder = document.createElement('div');
					placeholder.setAttribute('class', 'image-item');
					var up = document.createElement("div");
					//删除图片
					var closeButton = document.createElement('div');
					closeButton.setAttribute('class', 'image-close');
					closeButton.innerHTML = 'X';
					closeButton.id = "img-"+flag;
					//小X的点击事件
					closeButton.addEventListener('tap', function(event) {
					    setTimeout(function() {
					        for(var temp=0;temp<feedback.files.length;temp++){
								var strs= "imagesList"+idx;
								if(feedback.files[temp].id==strs){
									if(feedback.files[temp].childs.id==closeButton.id){
									    feedback.files.splice(temp,1);
									}
								}
					        }
							document.getElementById('image-list'+idx).removeChild(placeholder);
					        
					    }, 0);
					    return false;
					}, false);
					placeholder.style.backgroundImage = 'url(' + zip.target + ')';
					placeholder.appendChild(closeButton);
					placeholder.appendChild(up);
					//向前追加
					var first = document.getElementById('image-list'+idx).firstChild;
					document.getElementById('image-list'+idx).insertBefore(placeholder,first);
					//向后追加	
					//document.getElementById('image-list'+idx).appendChild(placeholder);
				};
		
		        feedback.newPlaceholder();
		    })();
		
	</script>
</html>

开发时用的是HBuilder工具开发的,在5+环境下连接到的手机运行;
如何在HBuilder下真机运行可参考:https://www.cnblogs.com/lhjfly/p/10451432.html
在这里插入图片描述
效果:
在这里插入图片描述

  • 2
    点赞
  • 6
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

jazhenglufang

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值