首页 > 代码库 > HTML5+ 手机端相册的操作

HTML5+ 手机端相册的操作

2024-09-18 00:44:17   219人阅读

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>WebApp启动页</title>
    <script type="text/javascript" src="../js/jQuery.js"></script>
    <style type="text/css">
        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;
        }
    </style>
</head>
<body>
    <input type="button" value="选择相册" id="Pick" />
    <input type="button" value="返回主页" id="ReturnIndex">
    <div id="Text"></div>
</body>
</html>
<script type="text/javascript">
    /**
     * 页面布局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 < event.files.length; i++){
                    $(‘#Text‘).append(event.files[i] + ‘<br/>‘);
                    str += ‘<img src="http://www.mamicode.com/‘+ event.files[i] +‘" />‘;
                }
                $(‘#Text‘).append(str);
            }, function(){
                $(‘#Text‘).append("图片选择失败!<br />");
            }, {filter: "none", multiple: true} )
        });
        
        /**
         * 保存文件到系统相册中 plus.gallery.save( path, A(), B() )
         * path: 文件的本地路径
         * A(): 保存成功的回调函数
         * B(error): 保存失败的回调函数
         */
        /* 具体例子请查看  http://www.cnblogs.com/lovling/p/6776454.html */
    });
</script>

 

HTML5+ 手机端相册的操作


联系
我们