apicloud （第四篇 UIAlbumBrowser（图片上传）以及photoBrowser（图片预览）的使用）

1、photoBrowser（支持单张、多张图片查看的功能，可放大缩小图片，支持本地和网络图片资源）

     官方文档：https://docs.apicloud.com/Client-API/Func-Ext/photoBrowser

2、UIAlbumBrowser

（本地媒体资源扫描器，在 Android 平台上可扫描整个设备的资源，iOS 仅扫描相册内的资源。本模块仅支持对本地图片资源的浏览、读取，目前尚不支持编辑）

     官方文档：https://docs.apicloud.com/Client-API/UI-Layout/UIAlbumBrowser

①上传图片：

   //上传图片

    function openPreview(e) {
        src = $api.attr(e, 'src');
        index = imgarrThumbPath.indexOf(src);
        fnOpen(imgarrPath,e);
    }
    function UIAlbumBrowser_imagePicker() {
        UIAlbumBrowser.imagePicker({
            max: 1,
            rotation: true,
            styles: {
                bg: '#000000',
                //cameraImg: 'widget://res/cameraImg.png',
                mark: {
                    position: 'top_right',
                    size: 20
                },
                nav: {
                    bg: '#000000',
                    cancelColor: '#fff',
                    cancelSize: 16,
                    nextStepColor: '#7fff00',
                    nextStepSize: 16
                },
                thumbnail: { //（可选项）返回的缩略图配置，**建议本图片不要设置过大** 若已有缩略图，则使用已有的缩略图。若要重新生成缩略图，可先调用清除缓存接口api.clearCache()。
                    w: 500, //（可选项）数字类型；返回的缩略图的宽；默认：原图的宽度
                    h: 500 //（可选项）数字类型；返回的缩略图的宽；默认：原图的高度
                }
            },
            animation: true,
        }, function(ret) {
            if (ret.eventType == 'nextStep') {
                if (ret.list && ret.list.length > 0) {
                    var allLength = imgarrPath.length + ret.list.length;
                    var resultLenth = 1 - imgarrPath.length
                    if (allLength >= 1) {
                        for (var m = 0; m < resultLenth; m++) {
                            imgarrPath.push(ret.list[m].path);
                            imgarrThumbPath.push(ret.list[m].thumbPath);
                            imgHTML = '<div class="img-wrap"><img class="imgCon" src="' + ret.list[m].thumbPath + '" onclick="openPreview(this)"></div>';
                            $api.before($api.byId('imgBtnWrap'), imgHTML)
                        }
                        document.getElementById('imgBtnWrap').style.display = "none";
                    } else {
                        for (var j = 0; j < ret.list.length; j++) {
                            imgarrPath.push(ret.list[j].path);
                            imgarrThumbPath.push(ret.list[j].thumbPath);
                            imgHTML = '<div class="img-wrap"><img class="imgCon" src="' + ret.list[j].thumbPath + '" onclick="openPreview(this)"></div>';
                            $api.before($api.byId('imgBtnWrap'), imgHTML)
                        }
                    }
                }
                if (imgarrPath.length == 1) {
                    document.getElementById('imgBtnWrap').style.display = "none";
                }
                UIAlbumBrowser.closePicker();
            }
            if (ret.originalPath && ret.originalPath.length > 0) {
                imgarrPath.push(ret.originalPath);
                imgarrThumbPath.push(ret.originalPath);
                imgHTML = '<div class="img-wrap"><img class="imgCon" src="' + ret.originalPath + '" onclick="openPreview(this)"></div>';
                $api.before($api.byId('imgBtnWrap'), imgHTML)
                if (imgarrPath.length == 1) {
                    document.getElementById('imgBtnWrap').style.display = "none";
                }
            }
        });
    }

 ②点击图片进行预览（本例中我新建了一个imgThree.html的文件，用来执行一些操作，比如返回上一页，或者删除图片）

//photoBrowser

function fnOpen(arrPath,index) {
        photoBrowser.open({
            images: arrPath,
            activeIndex: index,
            placeholderImg: '',
            bgColor: '#000'
        }, function(ret) {
            if (ret.eventType == 'show') {
                api.openFrame({
                    allowEdit: true,
                    name: 'imgThree',
                    url: './imgThree.html',
                    rect: {
                        x: 0,
                        y: 25,
                        w: 'auto',
                        h: 100,
                    }
                });
            }
            api.bringFrameToFront({
                from: 'imgThree'
            });
        });
    }

③imgThree.html

<!DOCTYPE HTML>
<html>
<body>
    <header id="header">

        //返回上一个页面
        <div class="left" tapmode onclick="closeImgWrap()">
            <span class="iconfont">&#xe600;</span>
        </div>

       //删除此图片
        <div class="right" tapmode onclick="removeImg()">
            <span class="iconfont">&#xe602;</span>
        </div>
    </header>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/aui-tab.js"></script>
    <script type='text/javascript'>
        function closeImgWrap() {
            fn('Close')
            api.closeFrame({})
        }

        function fn(name) {

          // console.log(name)   ---  Close

            api.execScript({

                frameName: 'modifyEnterpriseInformation_frm',

                script: 'fn' + name + '()'

            });

            // console.log('fn' + name + '()')   ---fnClose()
        }
       
        function removeImg() {
            fn('Getindex');
        }
    </script>
</body>

</html>

④补充说明：

execScript：https://docs.apicloud.com/Client-API/api#18

在指定 window 或者 frame 中执行脚本，对于 frameGroup 里面的 frame 也有效，若 name 和 frameName 都未指定，则在当前 window 中执行脚本，具体执行逻辑见补充说明。

execScript({params})

params

name：

• 类型：字符串
• 默认值：无
• 描述：（可选项）window 名称，若要跨 window 执行脚本，该字段必须指定，首页的名称为 root

frameName：

• 类型：字符串
• 默认值：无
• 描述：（可选项）frame名称

script：

• 类型：字符串
• 默认值：无
• 描述：js代码

示例代码

//在名为winName的window中执行jsfun脚本var jsfun = 'funcGoto();';
api.execScript({
    name: 'winName',
    script: jsfun
});


//在名为winName的window中找到//名为frmName的frame，并在该frame中执行jsfun脚本var jsfun = 'funcGoto();';
api.execScript({
    name: 'winName',
    frameName: 'frmName',
    script: jsfun
});


//在当前window中找到//名为frmName的frame，并在该frame中执行jsfun脚本var jsfun = 'funcGoto();';
api.execScript({
    frameName: 'frmName',
    script: jsfun
});

补充说明

统一处理逻辑为：exec->window->frame

name 参数： 当 name 不传值，或者传空字符串的情况下，execScript 对象为调用 execScript 的window（该 window 可能位于屏幕或者后台），在该 window 中继续 frameName 的逻辑； 当 name 传值且非空字符串，但并未找到名为 name 的 window，则直接返回不处理（不论 frameName 是否有值）。若找到了对应的 window，则在该 window 中继续 frameName 的逻辑；

frameName 参数： 当 frameName 不传值，或者传空字符串的情况下，execScript 对象为调用 execScript 的 window（该 window 可能位于屏幕或者后台），在该 window 中执行 script； 当 frameName 传值且非空字符串，但并未找到名为 frameName 的 frame，则直接返回不处理。若找到了该 frame，则在该 frame 中执行 script。

 

⑤所以我们就可以在  modifyEnterpriseInformation_frm  中调用fnClose()方法，来关闭页面或者删除图片。

 

 //关闭

function fnClose() {
        photoBrowser.close();
    }


    //删除图片
    function fnGetindex() {
        api.confirm({
            title: '是否删除图片？',
            msg: '',
            buttons: ['确定', '取消']
        }, function(ret, err) {
            var index = ret.buttonIndex;
            if (index == 1) {
                photoBrowser.getIndex(function(ret) {
                    var imgIndex = ret.index;
                    var imgIndexNum = imgIndex + 1
                    photoBrowser.deleteImage({
                        index: imgIndex
                    });
                    imgarrPath.splice(imgIndex, 1);
                    imgarrThumbPath.splice(imgIndex, 1);
                    var imgContainer = $api.byId('imgContainer');
                    $api.remove($api.eq(imgContainer, imgIndexNum))
                    if (imgarrPath.length < 9) {
                        document.getElementById('imgBtnWrap').style.display = "block";
                    }
                    if (imgarrPath.length == 0) {
                        fnClose()
                        api.closeFrame({
                            name: 'imgThree'
                        })
                    }
                })
            }
        })
    }

 详细介绍官网中都有，建议大家可以仔细阅读一遍。