标题: 显示新浪云storage文件夹中所有的图片 [打印本页]
作者: 51黑专家    时间: 2016-5-8 01:31
标题: 显示新浪云storage文件夹中所有的图片

       通过手机调用摄像头拍照把图片存储到云端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>










欢迎光临 (http://www.51hei.com/bbs/) Powered by Discuz! X3.1