要完成用MUI 拍照和從系統相冊選擇圖片上傳的功能，可以理解成有三個功能

1 調用手機相機的功能(可以查看官方API? http://www.html5plus.org/doc/zh_cn/camera.html)

2 調用系統相冊的功能(可以查看官方API??http://www.html5plus.org/doc/zh_cn/gallery.html)

3 照片資源上傳到服務(可以查看官方API??http://www.html5plus.org/doc/zh_cn/uploader.html)

?

下面是我的使用例子，

一， 調用 打開系統選擇框按鈕

?

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(); //拿到圖片路徑// 其他操作,比如預覽展示}, function(e) {console.log("讀取拍照文件錯誤：" + e.message);});}, function(s) {console.log("error" + s);}, {filename: "_doc/camera/"}) }

三， 打開手機相冊

?

// 從相冊中選擇圖片 function galleryImg(){// 從相冊中選擇圖片plus.gallery.pick( function(e){for(var i in e.files){var fileSrc = e.files[i];// 其他操作,比如預覽展示}}, function ( e ) {console.log( "取消選擇圖片" );},{filter: "image",multiple: true,maximum: 5,system: false,onmaxed: function() {plus.nativeUI.alert('最多只能選擇5張圖片');}}); }

四， 上傳到服務器

?

?

// 上傳的方法 function upload(){MicroTaskGUID = common.guid();var rul = "服務器地址"var imgsArr = mui(".task-img"); // 要上傳的 img 標簽mui.each(imgsArr, function(index, item){ // console.log(index) // console.log(item.src)createUp(item)})function createUp (files) {var task = plus.uploader.createUpload(url,{method:"POST"},function(t,status){ //上傳完成if(status==200){console.log("上傳成功："+t.responseText);}else{console.log("上傳失敗："+status);}});//添加其他參數 // task.addData("name","test");// 頁面中要上傳的 圖片路徑task.addFile(files.src,{key:files.src});task.start();} }

?

?

?

?

?

?

?

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的MUI 拍照和从系统相册选择图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。