MUI+H5手机上传照片 支持多图片上传和拍照上传

html代码:



拍照














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 = '

  • '+
    ''+
    ''+
    // '
    '+
    // ''+
    // '
    '+
    '
  • ';
    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         var f=files[i];
            task.addFile(f.src,{key:i});
        }
        //传其他的参数 如备注
        //添加其他参数
        //遍历5个input框
        
                task.addData("comment","test");
                task.start();
    });

    你可能感兴趣的:(mui)