mui调用本地相册调用相机上传照片

调用mui的常用库和jquery

html部分:

<header 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>
			<a class="mui-icon-right-nav mui-pull-right">
				<span id="headImage" class="mui-icon mui-icon-camera"></span>
			</a>
			<a class="mui-icon-right-nav mui-pull-right">
				<span id="uploadImage" class="mui-icon mui-icon-upload"></span>
			</a>
		</header>
		<div class="mui-content" style="background-color:#fff">
			<!-- 图片容器 -->
			<ul id="imgs" class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<img class="mui-media-object" src="images/60x60.gif">
					<span class="mui-icon mui-icon-trash deleteBtn" onclick="deleteImg(event)"></span>
				</li>
				
			</ul>
		</div>

  

js部分:

<script type="text/javascript">
			mui.init();
			var fileArr = [];
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			document.getElementById('headImage').addEventListener('tap', function() {
				if (mui.os.plus) {
					var buttonTit = [{
						title: "拍照"
					}, {
						title: "从手机相册选择"
					}];

					plus.nativeUI.actionSheet({
						title: "上传图片",
						cancel: "取消",
						buttons: buttonTit
					}, function(b) { /*actionSheet 按钮点击事件*/
						switch (b.index) {
							case 0:
								break;
							case 1:
								getImage(); /*拍照*/
								break;
							case 2:
								galleryImg(); /*打开相册*/
								break;
							default:
								break;
						}
					})
				}
			}, false);


			// 拍照获取图片  
			function getImage() {
				var c = plus.camera.getCamera();
				c.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径  
						setFile(imgSrc);
						setHtml(imgSrc);
					}, function(e) {
						console.log("读取拍照文件错误:" + e.message);
					});
				}, function(s) {
					console.log("error" + s.message);
				}, {
					filename: "_doc/camera/"
				})
			}
			// 从相册中选择图片   
			function galleryImg() {
				// 从相册中选择图片  
				plus.gallery.pick(function(e) {
					for (var i in e.files) {
						var fileSrc = e.files[i];
						setFile(fileSrc);
						setHtml(fileSrc);
					}
				}, function(e) {
					console.log("取消选择图片");
				}, {
					filter: "image",
					multiple: true,
					//maximum: 5,
					system: false,
					onmaxed: function() {
						plus.nativeUI.alert('最多只能选择5张图片');
					}
				});
			}

			//删除当前照片--删除当前元素的整个父级元素
			function deleteImg(event) {
				var obj = event.srcElement;
				obj.parentElement.remove();
			}

			function setHtml(path) {
				var str = '';
				str = '<li class="mui-table-view-cell mui-media mui-col-xs-4">' +
					'<img class="mui-media-object" src="' + path + '">' +
					'<span class="mui-icon mui-icon-trash deleteBtn" onclick="deleteImg(event)"></span>' +
					'</li>';
				jQuery("#imgs").append(str);
			}

			function setFile(fileSrc) {
				var image = new Image();
				image.src = fileSrc;
				fileArr.push(image);
			}
			
			document.getElementById('uploadImage').addEventListener('tap', function() {
				var files = fileArr;
				var wt = plus.nativeUI.showWaiting();
				var task = plus.uploader.createUpload('http://127.0.0.1:8848/weizhen_app/Upload', {
						method: "POST"
					},
					function(t, status) { //上传完成
						if (status == 200) {
							alert("上传成功:" + t.responseText);
							wt.close(); //关闭等待提示按钮
						} else {
							alert("上传失败:" + status);
							wt.close(); //关闭等待提示按钮
						}
					}
				);
				//将文件集合添加到上传队列中
				for (var i = 0; i < files.length; i++) {
					var f = files[i];
					task.addFile(f.src, {
						key: i
					});
				}
				//传其他的参数 如备注
				//添加其他参数
				//遍历5个input框
				task.addData("comment", "test");
				task.start();
			});
		</script>

 

原文地址:https://www.cnblogs.com/iverson666/p/10621084.html