html5手机相册资源,HTML5教程 手机端相册的操作

本篇教程探讨了HTML5教程 手机端相册的操作，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

html>

WebApp启动页

body{

width: 100%;

padding: 0;

margin: 0;

}

input{

padding: .2rem;

margin: .5rem auto 0 auto;

font-size: .5rem;

border-radius: .5rem;

display: block;

width: 5rem;

color: red;

background: white;

}

#Text{

width: 10rem;

text-align: center;

color: red;

font-size: .4rem;

}

#Text > img{

display: inline-block;

padding: 0;

margin: 0;

width: 5rem;

height: 6rem;

}

/**

* 页面布局rem重置语句

*/

$(‘html‘).css("font-size", $(window).width()/10);

/**

* 手机端页面初始化事件, 所有操作均要写在在该事件内

* 否则可能会出现错误: plus is not defind

*/

document.addEventListener(‘plusready‘, function(){

/**

* 返回首页的事件

*/

$(‘#ReturnIndex‘).on(‘touchstart‘, function(){

location.href = ‘Index.html‘;

});

/**

* 从系统相册选择文件 ( 图片或视频 ) :plus.gallery.pick(A(), B(), option)

* A(file): 单选系统相册的回调, file: 文件路径

* A(event): 多选系统相册图片成功的回调, event.files: 文件路径数组

* B(error): 相册选择失败的事件

* option: {

*    animation: (Boolean 类型 )是否显示系统相册文件选择界面的动画, 默认true

*    filename: (String 类型 )选择文件保存的路径

*    filter: (GalleryFilter 类型 )相册中选择文件类型过滤器, 图片"image", 视频"video",  所有"none", 默认"image"

*    maximum: (Number 类型 )最多选择的图片数量

*    multiple: (Boolean 类型 )是否支持多选图片

*    onmaxed: (Function 类型 )超过最多选择图片数量事件

*    popover: (PopPosition 类型 )相册选择界面弹出指示区域  top, left, width, height  (px 或者 百分比)

*    selected: (Array[ String ] 类型 )已选择的图片路径列表

*    system: (Boolean 类型 )是否使用系统相册文件选择界面

* }

*/

$(‘#Pick‘).on(‘touchstart‘, function(){

plus.gallery.pick( function(event){

var str = ‘‘;

for(var i = 0; i 

$(‘#Text‘).append(event.files[i] + ‘
‘);

                    str += ‘‘;

}

$(‘#Text‘).append(str);

}, function(){

$(‘#Text‘).append("图片选择失败!
");

}, {filter: "none", multiple: true} )

});

/**

* 保存文件到系统相册中 plus.gallery.save( path, A(), B() )

* path: 文件的本地路径

* A(): 保存成功的回调函数

* B(error): 保存失败的回调函数

*/

/* 具体例子请查看  */

});

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！