手机相册管理(gallery) ---- HTML5+
模块: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+的更多相关文章
- PhoneGap奇怪的现象:File FileTransfer download, 手机相册检测不到下载下来的图片(解决)
我有个从服务器下载相片的功能在使用 File FileTransfer download api时,碰到了很奇怪的现象:图片已经从服务器里下载了,手机文件夹里也可以看到下载过来的图片,但是我的手机相册 ...
- WebApp调用手机相册或摄像头、拨打电话
WebApp调用手机相册或摄像头.拨打电话 一.总结 一句话总结:input标签,指定type为file,选择好对应的accept即可.camera——相机,相应的accept为image : cam ...
- iOS 从手机相册里选取图片
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...
- 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片
本书是分享微信jssdk开发的第二篇. 4.2.1 项目需求 需求说明:实现微信端的手机用户,点击按钮选取1张图片,分享到朋友圈. 4.2.2 需求分解 通过对需求的了解,可以将其分解为: ( ...
- 小程序canvas生成海报保存至手机相册
小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...
- 【小白技术笔记】保存皮皮虾APP无水印视频到手机相册,只需要三步 [技术干货]
百万段友回皮皮虾,转身一变,都成了皮友.作为当年的资深段友,今天的皮友的我.看到好视频,经典视频,搞笑视频,就想保存一份到手机相册,然后皮皮虾啊皮皮虾,有个让人很讨厌的地方,保存视频的时候就有皮皮虾的 ...
- MVC3学习:实现简单的相册管理和图片管理
相册管理说白了就是文件夹管理,因此要用到命名空间using System.IO; 一.先来做相册管理,添加相册我就不做了,就是添加文件夹,这里主要做一下相册的显示.相册在页面上显示,需要一张图片,可以 ...
- 强大的安卓手机远程管理工具 – Droidjack
免责声明:本站提供安全工具.程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! Droidjack是一款针对安卓手机远程管理工具,你可以利用它在PC上对手机进行远程操控,不仅功能强大,使用 ...
- ios最新调用手机相册选取头像(UIActionSheet过期)
由于 UIActionSheet过期所以可以使用如下调用手机相册 前提不要忘记添加代理如下两个 UIImagePickerControllerDelegate,UINavigationControll ...
随机推荐
- 如何对抗、预防 SQL注入 攻击
一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...
- IE屏蔽鼠标右键、禁止复制粘贴等功能
<body oncontextmenu="return false" onselectstart="return false" ondragstart=& ...
- imx6 hdmi接口支持
/************************************************************* * imx6 hdmi接口支持 * 新的板子需要使用到hdmi,今天就测试 ...
- 电脑的CPU可直接解读的数据机器码
机器语言(machine language)是一种指令集的体系.这种指令集,称机器码(machine code),是电脑的CPU可直接解读的数据. 机器码有时也被称为原生码(Native Code), ...
- Ubuntu 12.04 root用户登录设置
Ubuntu 12.04默认是不允许root登录的,在登录窗口只能看到普通用户和访客登录.以普通身份登陆Ubuntu后我们需要做一些修改,普通用户登录后,修改系统配置文件需要切换到超级用户模式,在终端 ...
- Perl Spreadsheet::WriteExcel 模块自动生成excel 文件
Spreadsheet::WriteExcel 是一个跨平台的生成excel文件的模块, 可以方便的设置单元格内容, 样式, sheet 的名称: 但是默认情况下中文会乱码, 需要用Encode模块进 ...
- 基于mvcpager的分页(get请求,刷新页面),提供两种样式(来自bootstrap的样式)
使用方法:先把mvcpager.dll引用加入mvc项目 下载路径在本文末尾 前台代码 前台: @{ Layout = null; } @using Webdiyer.WebControls.Mvc ...
- jquery中判断选择器,找没找到元素用$().size()==0
jquery中判断选择器,找没找到元素用$().size()==0
- VMware Host Agent服务不能正常启动
VMware Host Agent服务不能正常启动 原因及解决方法 一直都在用VMWare Server 2.0,其他都还好,就是隔三差五的会有些小问题,比如VMware Host Agent服务不能 ...
- 在express项目中使用formidable & multiparty实现文件上传
安装 formidable,multiparty 模块 npm install formidable,multiparty –save -d 表单上传 <form id="addFor ...