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>