手机相册管理(gallery) ---- HTML5+

Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。

管理我们手机上用到的相册：选择图片，和保存图片；

应用场景：朋友圈发照片，QQ空间发视频，添加图片附件，添加视频附件；

这个不需要初始化（new）: 它有两个核心的方法：pick() 选取，save()；保存；

void plus.gallery.pick(successCB,errorCB,option);
void plus.gallery.save(path,successCB,errorCB);

option选项：

animation //是否显示系统相册文件选择界面的动画，可取值true、false，默认值为true。
filename //某些系统不能直接使用系统相册的路径，这时需要将选择的文件保存到应用可访问的目录中，可通过此参数设置保存文件的路径。
filter //系统相册选择器中可选择的文件类型，可设置为仅选择图片文件（“image”）、视频文件（“video”）或所有文件（“none”），默认值为“image”。
maximum //仅在支持多选时有效，取值范围为1到Infinity，默认值为Infinity，即不限制选择的图片数。 如果设置的值非法则使用默认值Infinity。
multiple //(Boolean 类型 )是否支持多选图片
onmaxed: //(Function 类型 )超过最多选择图片数量事件
popover: //(PopPosition 类型 )相册选择界面弹出指示区域
selected: //(Array[ String ] 类型 )已选择的图片路径列表
system: //(Boolean 类型 )是否使用系统相册文件选择界面

具体示例：

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">手机相册管理</h1>
</header>
<div class="mui-content mui-content-padded">
    <button type="button" id="btnselectImg" class="mui-btn mui-btn-blue mui-btn-block">选择一张图片</button>
    <img src="" alt="" id="selectImg" />
    <button type="button" id="btnselectMoreImg" class="mui-btn mui-btn-blue mui-btn-block">多选图片</button>
    <div id="imglist"></div>
</div>
<script src='http://libs.baidu.com/jquery/1.8.3/jquery.min.js'></script>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.plusReady(function(){
    // 选择一张图片
    $("#btnselectImg").bind('tap',function(){
        plus.gallery.pick(function(file){
            plus.io.resolveLocalFileSystemURL(file,function(entry){
                $("#selectImg").attr("src",entry.fullPath);
            });
        },function(e){},{});
    });
    //多选图片
    $("#btnselectMoreImg").bind('tap',function(){
        plus.gallery.pick(function(event){
            var files = event.files;
            for(var i=0;i<files.length;++i){
                var file = files[i];
                plus.io.resolveLocalFileSystemURL(file,function(entry){
                    //$("#imglist").attr("src",entry.fullPath);
                    $("#imglist").append("<img src='"+entry.fullPath+"' />");
                });
            }
        },function(e){},{});
    });
});
</script>

感谢分享https://www.cnblogs.com/e0yu/p/7850602.html

手机相册管理(gallery) ---- HTML5+

猜你喜欢