Question

类似于XBOX LIVE或PSN如何允许用户从他们的数据库中选择图像/头像，我如何能够使用Javascript / jQuery实现相同的结果，我使用PHP来实现此功能，但是，为了进一步学习，我想探索如何通过其他方式（js或jQuery）实现此功能，我的PHP代码如下：

<?php

    $imageFile = "../img/avatars/";
    $imageLoop = glob($imageFile. '*.*' , GLOB_BRACE);

    foreach($imageLoop as $image){
        echo "<label id='avatarLabel'><input type='radio' class='avatarInput' name='avatar' value='$image' >
        <img src='$image' id='avatarImage'></label>";
    }
    ?>
?>

我的JQuery尝试显示文件夹中的图像：

$(document).ready(function(){
("body").load("imgs/");
)}

Answer 1

使用php无法做到这一点。 Php只能处理来自POST数据的文件，它将位于临时目录中。此时将没有关于原始文件夹的数据。

可能有办法使用javascript，但这将是安全违规......

Answer 2

如果我理解正确的话，试一试：

<?php

$dir = '../img/avatar/';

$loop = GLOB($dir. '*{.jpg,.png}', GLOB_BRACE); // look for only jpg and png

foreach ($loop as $image) {
    $filename = basename($image); // only file name without path
    echo '<input type="radio" name="avatar_register" value="' . $filename . '" required><img src="' . $image . '">';
}

?>

$ x的数值没有任何意义，我已更改为$ filename，因此您可以找到图像 $ dir。 $ _POST [＆＃39; avatar_register＆＃39;];

由于您只是从文件夹中选择现有图像，因此无需上传过程。您只需要知道用户选择了哪个图像。

我也删除了id =＆＃34;＆＃34;因为它在一个循环中。这意味着将生成具有相同值的多个ID。如果您尝试从DOM

中找到id，这可能会导致将来出现问题

创建交互式头像选择

2 个答案: