標(biāo)題: 顯示新浪云storage文件夾中所有的圖片 [打印本頁(yè)]
作者: 51黑專家    時(shí)間: 2016-5-8 01:31
標(biāo)題: 顯示新浪云storage文件夾中所有的圖片

       通過(guò)手機(jī)調(diào)用攝像頭拍照把圖片存儲(chǔ)到云端storage里，再通過(guò)頁(yè)面viewpic.php來(lái)瀏覽所有的圖片。
    <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>


瀏覽器運(yùn)行效果：

為了點(diǎn)擊上述縮略圖，出現(xiàn)全屏大圖，只要把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.torrancerestoration.com/bbs/) Powered by Discuz! X3.1