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

来源：互联网发布：聊天软件市场分析编辑：程序博客网时间：2024/05/17 22:50

要完成用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();}}

阅读全文

1 0