当在我的目录中显示图像时，如何为其添加返回(或返回)按钮 - When displaying an image in my directory, how to add a return (or back) button to it?

我已经在php/html中编写了一个页面，人们可以上传他们的文件/图像，并在同一页面上显示哪些文件在您当前的上传文件夹。人们可以点击该页面上的特定文件，该文件将显示在网络浏览器中。假设有人点击image。jpg，那么图像就会打开。但问题是，图像没有嵌入到html/css脚本或其他什么，它只是显示图像。

如何编码返回或返回按钮到该图像?这样人们就可以回到文件上传页面了?

下面是我的代码:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Student Notes</title>
  <link rel="stylesheet" href="style.css">
  <script src=".sorttable.js"></script>
  <style>
  .upload{
    position: absolute;
    top: 400px;
    right: 800px;
    } 
    #back{
    position: absolute;
    top:70%; 
    left:20%;
} 
.back {
    -moz-box-shadow: 0px 1px 0px 0px #fff6af;
    -webkit-box-shadow: 0px 1px 0px 0px #fff6af;
    box-shadow: 0px 1px 0px 0px #fff6af;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
    background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
    background-color:#ffec64;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    cursor:pointer;
    color:#6e4b06;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffee66;
}
.back:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
    background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
    background-color:#ffab23;
}
.back:active {
    position:relative;
    top:1px;
}
  </style>

</head>
<body>
  <div id="container">
    <h1>Student Notes</h1>
    <table class="sortable">
      <thead>
        <tr>
          <th>Filename</th>
          <th>Type</th>
          <th>Size <small>(bytes)</small></th>
          <th>Date Modified</th>
        </tr>
      </thead>
      <tbody>
      <?php
        // Opens directory
        $myDirectory=opendir("./uploads/graphics/");
        // Gets each entry
        while($entryName=readdir($myDirectory)) {
          $dirArray[]=$entryName;
        }
        // Finds extensions of files
        function findexts ($filename) {
          $filename=strtolower($filename);
          //$exts=split("[/''.]", $filename);
          $n=count($exts)-1;
          $exts=$exts[$n];
          return $exts;
        }
        // Closes directory
        closedir($myDirectory);
        // Counts elements in array
        $indexCount=count($dirArray);
        // Sorts files
        sort($dirArray);
        // Loops through the array of files
        for($index=0; $index < $indexCount; $index++) {
          // Allows ./?hidden to show hidden files
          if($_SERVER['QUERY_STRING']=="hidden")
          {$hide="";
          $ahref="./";
          $atext="Hide";}
          else
          {$hide=".";
          $ahref="./?hidden";
          $atext="Show";}
          if(substr("$dirArray[$index]", 0, 1) != $hide) {
          // Gets File Names
          $name=$dirArray[$index];
          $namehref = "uploads/graphics/".$dirArray[$index];
          //$namehref=$dirArray[$index];
          // Gets Extensions 
          $extn=findexts($dirArray[$index]); 
          // Gets file size 
         $size=number_format(filesize("./uploads/graphics/".$dirArray[$index]))."&nbsp;";         
          // Gets Date Modified Data
          $modtime=date("M j Y g:i A", filemtime("./uploads/graphics/".$dirArray[$index]))."&nbsp;";
          $timekey=date("YmdHis", filemtime("./uploads/graphics/".$dirArray[$index]))."&nbsp;";

          // Prettifies File Types, add more to suit your needs.
          switch ($extn){
            case "png": $extn="PNG Image"; break;
            case "jpg": $extn="JPEG Image"; break;
            case "svg": $extn="SVG Image"; break;
            case "gif": $extn="GIF Image"; break;
            case "ico": $extn="Windows Icon"; break;
            case "doc": $extn="MS DOC"; break;
            case "docx": $extn="MS DOCX"; break;
            case "odt": $extn="Open Office DOC"; break;
            case "txt": $extn="Text File"; break;
            case "log": $extn="Log File"; break;
            case "htm": $extn="HTML File"; break;
            case "php": $extn="PHP Script"; break;
            case "js": $extn="Javascript"; break;
            case "css": $extn="Stylesheet"; break;
            case "pdf": $extn="PDF Document"; break;
            case "zip": $extn="ZIP Archive"; break;
            case "bak": $extn="Backup File"; break;
            default: $extn=strtoupper($extn)." File"; break;
          }
          // Separates directories
          if(is_dir($dirArray[$index])) {
            $extn="&lt;Directory&gt;"; 
            $size="&lt;Directory&gt;"; 
            $class="dir";
          } else {
            $class="file";
          }
          // Cleans up . and .. directories 
          if($name=="."){$name=". (Current Directory)"; $extn="&lt;System Dir&gt;";}
          if($name==".."){$name=".. (Parent Directory)"; $extn="&lt;System Dir&gt;";}
          // Print 'em
          print("
          <tr class='$class'>
            <td><a href='./$namehref'>$name</a></td>
            <td><a href='./$namehref'>$extn</a></td>
            <td><a href='./$namehref'>$size</a></td>
            <td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
          </tr>");
          }
        }
      ?>
      </tbody>
    </table>
    <h2></h2>
    <h2><a href='index.html'>Go Home</a></h2>
    <form class="upload" enctype="multipart/form-data" action="upload_graphics.php" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="512000000" />
    <a class="color">Send this file:</a><input name="userfile" type="file" />
    <input type="submit" value="Send File" />
    </form>    
  </div>
   <div id="back">
   <button class="back" type="button" onclick="history.back();">Back</button>
   <div>
</body>
</html>

和upload.php:

<?php
$uploaddir = 'uploads/graphics/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
//echo "<p>";
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
header('Location: dir_graphics.php');
//echo "File is valid, and was successfully uploaded.'n";
} else {
   echo "Upload failed";
}
//echo "</p>";
//echo '<pre>';
//echo 'Here is some more debugging info:';
//print_r($_FILES);
//print "</pre>";
?>

我希望我给了你足够的信息!

谢谢

米氏

编辑:

<htmL>
<head>
<style>
iframe[seamless] { 
    display: block;
    position: absolute;
    top: 20%;
    left: 20%;
}
</style>
</head>
<body>

<div class="iframe" >
<?php
include ('dir_graphics.php');
iframe = document.createElement("iframe");
iframe.src =  ('$namehref');
iframe.style.display = "block";
document.body.appendChild(iframe);
?>
<div>
</body>
<html>

唯一的方法就是提供一个带有iFrame的公共页面。然后，您可以在iFrame之外使用导航控件，而在

中控制要显示的文档。

否则你只能依靠浏览器的导航按钮让用户回到你的网站。

您可以将文件名传递给单独的php脚本，而不是直接链接到该文件。该脚本可以在某些html中显示该文件，该html具有返回到上一页的链接。

验证传递的文件是否可以显示是个好主意。也就是说，确保文件存在于上传目录中，并且没有人试图显示"../.."/etc/passwd'文件或类似文件

一般来说，服务用户上传的内容充满了安全问题，但这是另一回事。