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(); //拿到图片路径
            // 其他操作,比如预览展示

        }, 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();
	}
}