Question

我想为我的网站制作一个图库。我开发了添加图像的代码，但我想为图像添加一个编辑按钮，比如Facebook。

我想要它，所以当你在图像上传递鼠标时，你可以看到一个编辑按钮。

我经常搜索但没有任何帮助。

这是我的代码：

＆＃13;

<?php
  if(isset($_POST['upload_img'])){

    $file_name = $_FILES['images']['name'];
    $file_type = $_FILES['images']['type'];
    $file_size = $_FILES['images']['size'];
    $file_tmp = $_FILES['images']['tmp_name'];
    if($file_name){
      move_uploaded_file($file_tmp,"img/$file_name");
    }
  }

?>
<html>
<head>
  <title>Test upload img</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload Image</label><br>
<input type="file" name="images"><br><br>
<input type="submit" value="upload img" name="upload_img">
</form>

<?php
$folder="img/";
if(is_dir($folder)){
if($handle = opendir($folder)){
while(($file=readdir($handle))!=false){
if($file==='.' || $file==='..')
continue;
echo'<img src="img/'.$file.'"width="150" height="150">
<form>
<input type="file" value="Edit">
</form>
 ';
}
closedir($handle);
}
}
?>

</body>
</html>

＆＃13;

Answer 1

希望这有帮助。

<强> HTML：

<div class="image_container">
  <input type="file" class="edit_btn" value="Edit">
  <img src="img.jpg">
</div>

<强> CSS：

.image_container{ position: relative; }
.edit_btn{ postion: asolute; top: 10px; right: 10px; background-color: #000; color: #fff; padding: 8px 15px; border: 0; display: none; }
.image_container:hover .edit_btn{ display: block; }

按钮编辑图像

1 个答案: