手機相簿管理(gallery) ---- HTML5+

標籤：ref   檔案的   tar   img   tle   mat   管理系   ima   圖片路徑   

模組：gallery

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>

 

手機相簿管理(gallery) ---- HTML5+