MUI使用H5+Api调取系统相册多图选择及转base64码

2021-01-23 17:14

阅读：552

YPE html>

伟大的哲学家曾说过
“写代码，一定要翻文档”

这次我们需要用到的是调取系统相册进行多图上传，
先奉上html5+api关于系统相册的文档链接
链接:HTML5+ API Reference & gallery

首先一点，我们在使用5+Api前都需要在manifest.json文件中进行功能模块的添加，
当然用Hbuilder的话大部分模块都已在内，这里是关于相册的模块

{
// ...
"permissions":{
    // ...
    "Gallery": {
        "description": "系统相册"
    }
}
}

另外，5+Api需在plusReady事件之后

//mui封装的方法
mui.plusReady(function(){
    // ...
});
//5+写法
document.addEventListener( "plusready", function(){
    // ...
}, false );

进入正题，多图上传的核心代码为以下代码
我们可以设置多种参数，请查阅文档

// 从相册中选择图片 
function galleryImg() {
    // 从相册中选择图片
    console.log("从相册中选择图片:");
    plus.gallery.pick( function(path){
        console.log(path);
    }, function ( e ) {
        console.log( "取消选择图片" );
    }, {filter:"image"} );
}

以下是多图上传的demo
请在包含配置文件和mui css及js项目中打开
iOS模拟器调试会闪退，真机不会，具体原因未知

‘; list.insertBefore( div , btn ); btnHidden(); //显示或隐藏添加按钮 } } //删除 mui(‘#list‘).on(‘tap‘,‘.delete‘,function(){ this.parentNode.remove(); btnHidden(); //显示或隐藏添加按钮 }) // 在5+文档中关于多图选择参数中 maximum 的解释是 // 取值范围为1到Infinity，默认值为Infinity，即不限制选择的图片数。如果设置的值非法则使用默认值Infinity。 // 我们在点击是会使用 -= 来出来 pNum ，会得到负值而导致使用默认值 // 故在每次添加图片时进行判断，是否隐藏添加按钮 function btnHidden(){ if ( list.querySelector(‘.photo-box‘) ) { var box = list.getElementsByClassName(‘photo-box‘); if( box.length > setNum - 1 ){ btn.classList.add(‘mui-hidden‘); } else { btn.classList.remove(‘mui-hidden‘); } } else { btn.classList.remove(‘mui-hidden‘); } }

上一篇：C#中类的修饰符

下一篇：git和小乌龟在windows下安装

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：MUI使用H5+Api调取系统相册多图选择及转base64码
文章链接：http://soscw.com/index.php/essay/45954.html

亲，登录后才可以留言！

MUI使用H5+Api调取系统相册多图选择及转base64码

从相册上传图片

评论

热门文章

推荐文章

最新文章

置顶文章