改进

Question

我当前正在创建一个程序，该程序显示单击事件中的随机图像。

我有应该（但目前不是）显示我的文件夹中的随机图像的代码，但是，我将这些图像上传到了我的数据库中（定义为大斑点）。我想从我的数据库中随机输出这些图像（当然要使用MySqli）。

我该如何处理？

我当前的代码是：

JS：

    var myImg = ["fruit1.jpg", "fruit2.jpg", "fruit3.jpg", "fruit4.jpg", "fruit5.jpg", "fruit6.jpg"];



//create a function named displayImage
//it should not have any values passed into it

var inputs = document.querySelectorAll('input');

for(var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('click', function() {
    var num = Math.floor(Math.random() * 12);
    this.nextElementSibling.src = myImg[num];
  })
}

相关html代码示例：

<div class="boxa">A1
    <input type=button value="Display Random Image">
    <img src="config.php" name="canvas" />
</div>

Answer 1

正如我们许多人观察到的那样，您当前正在使用javascript从数据库中检索项目/数据。您可以通过两种方式在数据库中获取图像。首先是摆脱JavaScript并使用PHP检索数据，或者使用第三方js插件（如AJAX），以便仍可以使用javascript检索数据。不同之处在于，AJAX不会重新加载整个页面。但是，既然您没有在问题中标记AJAX，我们可以在php中完成。

index.php

<?php
  ... //Connection to database
  session_start();
  $_SESSION['ctr'] = ((isset($_SESSION['ctr'])) ? $_SESSION['ctr'] : 0);
  if(isset($_GET['incrementBtn']){
    $_SESSION['ctr']++;
  }
  $ctr = $_SESSION['ctr'];
  $imageArray = array();
  $result = $db->query("Select * from image"); //Retrieval Query
  for($x=0; $rows = mysqli_fetch_array($result); $x++){
    $imageArray[$x] = $rows['images']; //The Attribute name of your image, here i simply assume that it is 'image'
  }
?>
<div class="boxa">A1
    <form method="get" action="index.php">
        <input type="submit" name="incrementBtn" value="Display Random Image">
    </form>

    <img src="<?php echo $imageArray[$ctr]; ?>" name="canvas" />
</div>

希望这会有所帮助。如果此代码出了问题，请更正我，因为我没有尝试过此代码，因为我使用手机来回答此问题。谢谢！：D

Answer 2

在客户端，没有理由进行AJAX调用以显示要显示的图像。您的<img>标记可以直接引用您的PHP脚本：

<img src="getRandomImage.php" />

通常，您使用PHP返回HTML，但是没有理由它也不能返回二进制数据。在这里，我们只是让浏览器完成发出请求的工作。现在，由服务器端脚本来输出图像。

在getRandomImage.php中，首先需要查询随机图像。最好让数据库引擎执行此操作，因为没有必要在应用程序和数据库服务器之间改组多余的数据。您的查询将如下所示：

SELECT blobData FROM images ORDER BY RAND() LIMIT 1;

（{blobData在此是包含二进制图像数据的列的名称。）

使用常规方法进行查询和获取数据。现在，要将其输出到浏览器可以使用的东西，首先我们必须设置适当的标头。第一个将响应内容类型设置为JPEG。（如果您不输出JPEG，请将其更改为适合您的图片类型的图片。

header('Content-Type: image/jpeg');

接下来，我们需要防止缓存。这很重要，因为我们正在更改对此脚本的每个请求的响应数据：

header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');

现在，只需输出图像数据即可。

echo $row['blobData'];

如果一切顺利，您应该在图像标签中看到该图像。

改进

通常，当您发出GET请求时，对具有相同请求数据的相同URL的所有后续GET请求应返回相同的响应。虽然这不是技术要求，但它是启用高速缓存以及无法正常运行的最佳实践。

可以使您仍然具有可缓存的图像，同时使选择随机。为此，您要做的就是重定向到图像。例如，getRandomImage.php可能会执行以下操作：

SELECT id FROM images ORDER BY RAND() LIMIT 1;

然后响应可能只是重定向：

header('Location: image.php?id=' . $row['id']);

然后在image.php中，按照ID（不是随机）加载图像并将其输出，就像在第一个示例中一样。理想情况下，您的图像只是静态文件，无需后续数据库查找即可访问，并且随机选择脚本可以直接重定向到静态文件。默认情况下，PHP将执行302状态代码，导致非永久重定向，该重定向不会缓存在行为良好的客户端中。

Answer 3

您可以将jQuery用于简单的Ajax请求：

<div class="boxa">A1
  <input id="rndimgbtn" type=button value="Display Random Image">
  <img id="rndimg" src="config.php" name="canvas" />
</div>

$("#rndimgn").click(function(){
  $.ajax({
    url: "./path/to/getmyrandomimage.php", 
    success: function(result){
      var data = $.parseJSON(result);
      $("#rndimg").attr("src", "data:"+data.mime+";base64,"+data.image});
    }
  });
});

对于PHP：

#getmyrandomimage.php
$db = mysqli_connect("localhost","user","pass","autoselectdb");
$sql = "SELECT image, mime FROM table ORDER BY RANDOM() LIMIT 1";
$sth = $db->query($sql);
$result=mysqli_fetch_array($sth);

die(json_encode((object)[
  "image" => chunk_split(base64_encode($result['image'])),
  "mime" => $result['mime']
]));

请记住，将图像存储为普通Blob，而不是编码形式或其他形式。您还需要存储图像mime类型，否则js不知道其尝试呈现的图像格式。

如何显示数据库中的随机图像？

3 个答案:

改进