最近要用MUI做項目，在研究圖片上傳時 ，遇到了大坑 ，網上搜集各種資料，最終寫了一個demo，直接看代碼。參考（http://www.cnblogs.com/richerdyoung/p/6612350.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title></title>
<link rel="stylesheet" href="css/mui.min.css" />
<script type="text/javascript" src="js/jquery-1.8.1.js" ></script>
<script type="text/javascript" src="js/mui.min.js" ></script>
<style>
.imageup{ width:100px; height: 36px; line-height:36px;}
.button{ width:100px; height: 50px; line-height:50px;}
ul li p{
display: inline-block;
}
</style>
</head>
<body>
<ul class="list">
<li class='mui-table-view-cell mui-media'>
<img id="headimg" class="headimg" src='' height="150" width="150">
<p><a class="imageup 1">上傳圖片1</a> </p>
<p><button onclick="upload();" class='button'> 提交</button></p>
</li>
<li class='mui-table-view-cell mui-media'>
<img id="headimg" class="headimg" src='' height="150" width="150">
<p><a class="imageup 2">上傳圖片2</a> </p>
<p><button onclick="upload();" class='button'> 提交</button></p>
</li>
<li class='mui-table-view-cell mui-media'>
<img id="headimg" class="headimg" src='' height="150" width="150">
<p><a class="imageup 3">上傳圖片3</a> </p>
<p><button onclick="upload();" class='button'> 提交</button></p>
</li>
</ul>
<script>
//擴展API完成后執行的操作
function plusReady(){
//給選中的li增加判別class
$(".list li").on("tap",".imageup",function(){
alert('11');
var $li = $(this).parents("li");
console.log($($li).text())
$li.addClass("selectLi");
$li.siblings().removeClass("selectLi");
page.imgUp();
})
}
//彈出系統按鈕選擇框
var page=null;
page={
imgUp:function(){
var m=this;
/* console.log(m);*/
plus.nativeUI.actionSheet({cancel:"取消",buttons:[
{title:"拍照"},
{title:"從相冊中選擇"}
]}, function(e){//1 是拍照 2 從相冊中選擇
switch(e.index){
case 1:appendByCamera();break;
case 2:appendByGallery();break;
}
});
}
}
// 拍照添加文件
function appendByCamera(){
plus.camera.getCamera().captureImage(function(e){
console.log("e is" + e);
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var path = entry.toLocalURL();
var indexa = liIndex()
console.log(indexa);
$(".headimg")[indexa].src = path;
}, function(e) {
mui.toast("讀取拍照文件錯誤：" + e.message);
});
});
}
// 從相冊添加文件
function appendByGallery(){
plus.gallery.pick(function(path){
var indexa = liIndex();
console.log(indexa);
$(".headimg")[indexa].src = path;
});
}
//服務端接口路徑
var server = "http://www.test.cn/aaa.php";
//獲取圖片元素
var files = document.getElementById('headimg');
// 上傳文件
function upload(){
var wt=plus.nativeUI.showWaiting();
var task=plus.uploader.createUpload(server,
{method:"POST"},
function(t,status){ //上傳完成
if(status==200){
alert("上傳成功："+t.responseText);
wt.close(); //關閉等待提示按鈕
}else{
alert("上傳失敗："+status);
wt.close();//關閉等待提示按鈕
}
}
);
//添加其他參數
task.addData("name","test");
task.addFile(files.src,{key:"dddd"});
task.start();
}
//判斷點擊的是上傳的第幾個li
function liIndex(){
var lis = $(".list").children();
console.log(lis.length)
for(var i = 0; i < lis.length;i++){
console.log($(lis[i]).attr("class"))
var lisClass = $(lis[i]).attr("class").split(" ");
if(lisClass[2] == "selectLi"){
console.log(i);
return i;
}
}
}
//擴展API是否准備好，如果沒有准備好則監聽plusReady
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</body>
</html>
關鍵是最后，重點來了，普通瀏覽器里沒有plus環境，只有HBuilder真機運行、打包后、或流應用環境下才能運行plus api。
也就是說我的上傳圖片的案例放在微信端是不執行的（我個人測出的結果，不代表絕對）。所以，我又趕（bu）緊(de)的(bu)改變了策略，去研究微信自帶的調取攝像頭和相冊來實現圖片上傳功能，這個可以去看微信公眾平台的開發者文檔，內容都比較全。
最后，如果大家對mui 的調取攝像頭和相冊實現圖片上傳有什么好的想法，歡迎補充~~~~