MUI+H5手機上傳照片 支持多圖片上傳和拍照上傳

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-6">
<a href="#">
<img class="mui-media-object" src="images/shuijiao.jpg">
<span class="mui-icon mui-icon-trash deleteBtn"></span>
<div class="mui-media-body">
<input type="text" class="remark" placeholder="備注">
</div>
</a>
</li>-->
</ul>
</div>

Js代碼：

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 setHtml(path) {
var str = '';
str = '<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
'<img class="mui-media-object" src="'+path+'">'+
'<span class="mui-icon mui-icon-trash deleteBtn"></span>'+
// '<div class="mui-media-body">'+
// '<input type="text" class="remark" placeholder="備注">'+
// '</div>'+
'</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://192.168.1.111:8181/sys-privilege/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();
});

————————————————
版權聲明：本文為CSDN博主「Ocean-Cheung」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_29407683/article/details/80007643