我正在制作一个注册页面,允许您为我的uni项目向mysql数据库注册帐户。
在此页面中,您还可以"选择"您的头像图片。下面是代码:
<u>Select your avatar:</u><br>
<?php
// open this directory
$image_dir = opendir("images/avatars");
// get each entry
while( $image = readdir( $image_dir ) )
{
$dirArray[] = $image;
}
// close directory
closedir($image_dir);
// count elements in array
$indexCount = count($dirArray);
// loop through the array of files and print them all in a list
for($index=0; $index < $indexCount; $index++)
{
$extension = substr($dirArray[$index], -3);
if( $extension == "jpg" || $extension == "gif" )
{
//echo("<a href='#'>");
echo("<img id='$index' onClick='SetAvatar($index)' img src='images/avatars/$dirArray[$index]' class='o'> ");
//echo("</a>");
}
}
?>
<script>
function SetAvatar(id) {
var image = document.getElementById(id);
if( CurSelectedImage != null && id != CurSelectedImage )
{
var image_to_unselect = document.getElementById(CurSelectedImage);
image_to_unselect.Selected = false;
image_to_unselect.style.border = null;
}
if( image.Selected != true )
{
image.style.border = 'medium solid blue';
image.Selected = true;
SelectedImage = id;
}
else
{
image.style.border = null;
image.Selected = false;
SelectedImage = null;
}
}
</script>
这会选择化身图片,使边框变蓝,并将选定的图像id存储在变量中,但我如何将具有选定图像id的变量传递回php,以便保存它??
感谢
你也能展示你的CSS代码吗
或者你可以在这里找到jQuery选择和取消选择图像您的答案
您必须考虑您的应用程序设计。混合PHP和Javascript并不是最好的主意。使用API而不是混合代码。您可以使用Ajax调用此API。我认为这是一个很好的设计选择:
- 在PHP中创建getImages API:以json数组输出数据
- 您使用javascript调用这个api,并使用json生成DOM
- 您用javascript创建了一个点击处理程序,并用PHP再次调用了一个API
- 您可以在PHP中获取json数据并将其保存在数据库中
:)
我的建议是使用CSS类。删除该类的任何现有实例,然后将该类添加到所选图像中。
function SetAvatar(id) {
//remove existing border(s) a while loop is used since elements is a live node list which causes issues with a traditional for loop
var elements = document.getElementsByClassName("selected-avatar");
while (elements.length > 0) {
var element = elements.item(0);
element.className = element.className.replace(/(?:^|s)selected-avatar(?!S)/g , '');
}
var image = document.getElementById(id);
image.className += " selected-avatar";
}
要传递化身值,我建议使用表单将您的所有注册数据传递给process_register(如果您还没有)。您可以在表单中添加隐藏类型的输入,并在提交时通过javascript填充值。
html:
<form id="registration-form" action="process_register.php" method="put">
<input id="registration-avatar" type="hidden" />
<button id="registration-submit">Submit</button>
</form>
javascript:
document.getElementById("registration-submit").onclick = function(){
var avatarValue; //you'll need to write some code to populate the avatarValue based on the selected avatar image
document.getElementById("registration-avatar").value = avatarValue;
document.getElementById('registration-form').submit();
};
然后在php中,您可以使用$_POST获取值http://php.net/manual/en/reserved.variables.post.php