我当前正在创建一个程序,该程序显示单击事件中的随机图像。
我有应该(但目前不是)显示我的文件夹中的随机图像的代码,但是,我将这些图像上传到了我的数据库中(定义为大斑点)。我想从我的数据库中随机输出这些图像(当然要使用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>
答案 0 :(得分:0)
正如我们许多人观察到的那样,您当前正在使用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
答案 1 :(得分:0)
在客户端,没有理由进行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状态代码,导致非永久重定向,该重定向不会缓存在行为良好的客户端中。
答案 2 :(得分:-1)
您可以将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不知道其尝试呈现的图像格式。