Question

我目前正在开发一个简单的网页，使用户能够：将图像和相应的标题上传到数据库，让用户查看图像并删除它们。我已经使用以下代码完成了前两个：

<?php
#include_once("connection.php");
$db = new mysqli("192.168.2.2", "root", "", "proyectoti");
if ($db->connect_errno) {
    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
echo "Información de servidor: ";
echo $db->host_info . "\n";

// Initialize message variable
  $msg = "";

  // If upload button is clicked ...
  if (isset($_POST['upload'])) {
    // Get image name
    $image = addslashes(file_get_contents($_FILES['image']['tmp_name']));  #$_FILES['image']['name'];
    // Get text
    $image_text = mysqli_real_escape_string($db, $_POST['image_text']);

    $sql = "INSERT INTO images (image, image_text) VALUES ('{$image}', '{$image_text}')";
    // execute query
    mysqli_query($db, $sql);
  }
  $result = mysqli_query($db, "SELECT * FROM images");

?>
<!DOCTYPE html>
<html>
<head>
<title>Proyecto TI | Sube imágenes</title>
<style type="text/css">
   #content{
    width: 50%;
    margin: 20px auto;
    border: 1px solid #cbcbcb;
   }
   form{
    width: 50%;
    margin: 20px auto;
   }
   form div{
    margin-top: 5px;
   }
   #img_div{
    width: 80%;
    padding: 5px;
    margin: 15px auto;
    border: 1px solid #cbcbcb;
   }
   #img_div:after{
    content: "";
    display: block;
    clear: both;
   }
   img{
    float: left;
    margin: 5px;
    width: 300px;
    height: 140px;
   }
</style>
</head>
<body>
<h1>Proyecto TI | <a> Interfaz </a></h1>
<div id="content">
  <?php
    while ($row = mysqli_fetch_array($result)) {
      echo "<div id='img_div'>";
        #echo "<img src='images/".$row['image']."' >";
        echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>';
        echo "<p>".$row['image_text']."</p>";
      echo "</div>";
    }
  ?>
  <form method="POST" action="index.php" enctype="multipart/form-data">
    <input type="hidden" name="size" value="1000000">
    <div>
      <input type="file" name="image">
    </div>
    <div>
      <textarea 
        id="text" 
        cols="40" 
        rows="4" 
        name="image_text" 
        placeholder="Di algo de esta imagen ^^"></textarea>
    </div>
    <div>
        <button type="submit" name="upload">Publicar</button>
    </div>
  </form>
</div>
</body>
</html>

看起来像这样：

现在，我唯一缺少的部分是能够删除图像（基本上我只回显每个图像），你如何建议我完成这项工作，让每个项目都可以点击，然后让它们出现。比如说，弹出一个对话框或按钮来执行一个动作（从DB中删除）。

我真的不太了解PHP或CSS / HTML，非常感谢任何帮助，谢谢！

Answer 1

在删除项目之前打开对话并询问用户将要求您删除其他页面或使用javascript。在这两种情况下，您都应该以某种方式在html代码中为图像设置标识符。我建议你给每个图像一个id '<img ... id="'.$yourImageId.'">' 或数据属性 '<img ... data-identifier="'.$yourImageId.'" >' 用那个标识符。

第一个变种：

...
echo '<a href="/path/to/delete/view/page.php?image=yourImageId">'
echo '<img ... id="'.$yourImageId.'"/>'
echo '</a>'
...

在此删除视图页面上，您只有一个触发删除代码的表单

<form action="/path/to/delete/view/page.php" method="POST">
<input type="hidden" name="id" value="<?php echo $yourImageId ?>">
</form>
<!-- after this, react with $_POST['id'] --> to the id sent to the server side and delete the image in your database -->

另一种方式不是服务器端渲染。你应该给你的元素一些类似于＆＃34; my-clickable-image＆＃34;。之后，你的页面上有一个脚本，看起来像下面这样的

<script>
/* get your images with querySelectorAll, the . stands for class and after that your name */
var clickables = document.querySelectorAll(".my-clickable-image");
clickables.foreach(function(image){
// say that for each image, when clicked the generated function is called   image.addEventListener('click',generateShowDialogueFunc(image.getAttr("id")));
});

// generate a function(!) that reacts to an image being clicked
function generateShowDialogueFunc(imageIdentifier){
 // return a function that adds a Pop Up to the page
 // the Pop Up has approximately the code of the first options second page
 // except that now, it must create and remove elements in javascript
 return function createPopUp(){
  removePopUp();
  var popup = document.createElement("div");
  popup.setAttribute("id","deletePopUp");
  var deleteForm = document.createElement("form");
  deleteForm.setAttr("action","/path/to/file/that/deletes/given/query.php?id="+imageIdentifier);
  var deleteContents = '<p> Do you want to delete this image? </p>'
  + '<button type="submit"> yes </button>'
  + '<button onclick="removePopUp()"> no </button>'
  deleteForm.innerHTML = deleteContents;
  document.body.appendChild()
 }
}

// remove the Pop Up that can be used to delete an image from the page
function removePopUp(){
 var existingPopUp = document.getElementById("deletePopUp");
 if(existingPopUp) document.body.removeChild(existingPopUp);
}
</script>

<!-- just add some styling to make the popup show on top of the page -->
<style>
  #deletePopUp{
    width: 50vw;
    height: 50vh;
    position: absolute;
    z-index: 1;
    padding: 1em;
  }
</style>

在这种情况下，您只需调用服务器删除图像，而不是显示删除表单。

我建议第二个，但堆栈溢出不是基于意见的答案。

关于简单安全性：看起来您的用户可以为图像提供标题或文本。尝试如果用户给出<bold>some title</title>之类的标题会发生什么并猜测如果标题为<script>window.location.href="google.com"</script>会发生什么（XSS *提示提示*）

关于代码结构：如果你想更频繁地做网页开发之类的事情，考虑将你的数据库访问代码和你的逻辑代码与你的php页面模板代码分开，这被称为3层架构和更大项目的标准，但我想这实际上只是一个首先，简短的原型或测试。

Answer 2

在此循环中：

  <?php
    while ($row = mysqli_fetch_array($result)) {
      echo "<div id='img_div'>";
        #echo "<img src='images/".$row['image']."' >";
        echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>';
        echo "<p>".$row['image_text']."</p>";
      echo "</div>";
    }
  ?>

个人我会添加一个元素来点击 - 例如一个＆＃39; x＆＃39;或者其他 - 具有唯一的数据属性： https://www.abeautifulsite.net/working-with-html5-data-attributes

你必须明显地添加图像的唯一ID，这样你就可以让SQL知道要删除的行......就像这样：

 echo "<div class='delete-image' data-id='" . $row['id'] . "'>x</div>';

然后我将此类链接到 AJAX 调用，以向服务器发出异步请求并删除图像而不重新加载页面。这不是很难。

更简单的解决方案是在循环中创建新表单，因此您为每个图片创建多个表单，在表单中添加带有图片ID的隐藏字段并使用valeu制作提交按钮＆＃39;删除＆＃39;或者只是＆＃39; x＆＃39;。

与创建支票的方式相同：

if (isset($_POST['upload'])) { ... }

您可以创建以下内容：

if (isset($_POST['delete-image'])) { ... }

您将携带图像ID值，就像普通表格输入一样。你可以用它做任何你想做的事。

我强烈建议你研究如何使用jquery和ajax调用。

使列表中的元素可单击（PHP）

2 个答案: