找回密码
 立即注册

QQ登录

只需一步,快速开始

帖子
查看: 2777|回复: 0
打印 上一主题 下一主题
收起左侧

显示新浪云storage文件夹中所有的图片

[复制链接]
跳转到指定楼层
楼主
ID:114320 发表于 2016-5-8 01:31 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

       通过手机调用摄像头拍照把图片存储到云端storage里,再通过页面viewpic.php来浏览所有的图片。
    <div >
    <button id="snap" >拍照上传</button>
    <button id="viewpic" >查看全图</button>   
    </div>  

viewpic.php文件源码


<!DOCTYPE HTML>
<HTML>
    <head>
        <title>查看云端storage里cardpic文件夹所有图片文件</title>
        <meta http-equive="content-type" content="text/html" charset="utf-8"/>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta name="apple-mobile-web-app-capable" content="yes" />   
        <style>
            div{margin:5px 8px;border:1px solid red;float:left;}
            img{width:128px;height:96px;border:1px solid blue;margin:3px 3px 3px 3px;  vertical-align:middle;}
            body{margin:10px 25px ;border:1px solid blue;  vertical-align:middle;}

        </style>
    </head>

  <body>
   <?php
                $mystorage = new SaeStorage();
                $domain = 'file';
                $path = "cardpic"; //子文件夹
                $num = 0;
                while ( $ret = $mystorage->getList($domain,$path,100,$num))
                {
                  foreach($ret as $file)
                  {
                  $url = $mystorage->getUrl($domain,$file);
                      echo "<div><a href='$url' target='_blank'><img  src='$url' /></a></div> ";
                  $num ++;
                  }
                }

     ?>

    </body>
</HTML>


浏览器运行效果:

为了点击上述缩略图,出现全屏大图,只要把viewpic.php中
    echo "<div><a href='$url' target='_blank'><img  src='$url' /></a></div> ";  //在微信中显示大图效果不居中
改为
   echo "<div><a href='viewlargepic.php?url=$url' target='_blank'><img id='img' class='min' src='$url' /></a></div> ";
就可以了。

viewlargepic.php源码 <!DOCTYPE HTML>
<HTML>
    <head>
        <title>全屏显示大图片</title>
        <meta http-equive="content-type" content="text/html" charset="utf-8"/>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta name="apple-mobile-web-app-capable" content="yes" />   
        <style>
            div{margin:50px auto;border:1px solid none; vertical-align:middle;text-align:center;}
            img{width:98%;height:auto;border:1px solid red;margin:50px auto;  vertical-align:middle;}
            body{margin:0px auto ; vertical-align:middle;}

        </style>

    </head>

  <body>

  <?php
  $url1 = $_REQUEST['url'];
    if(isset($url1)){
      echo "<div><img  src='$url1' target='_blank'/></div> ";
    }            
   ?>
    </body>
</HTML>






分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享淘帖 顶 踩
回复

举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|51黑电子论坛 |51黑电子论坛6群 QQ 管理员QQ:125739409;技术交流QQ群281945664

Powered by 单片机教程网

快速回复 返回顶部 返回列表