MUI 拍照和从系统相册选择图片上传

要完成用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(); //拿到图片路径  
              
            setHtml(imgSrc);  
        }, 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]  
            setHtml(fileSrc);  
        }  
    }, function ( e ) {  
        console.log( "取消选择图片" );  
    },{  
        filter: "image",  
        multiple: true,  
        maximum: 5,  
        system: false,  
        onmaxed: function() {  
            plus.nativeUI.alert('最多只能选择5张图片');  
        }  
    });  
}  

四、上传到服务器

// 上传的方法
function upload(){
    var files = document.getElementById('testImg');
    MicroTaskGUID = common.guid();  
      
    var rul = "服务器地址"  
      
    var imgsArr = mui(".task-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();  
    }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！