手機相冊管理(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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章