0

很抱歉这个冗长的问题。我会尽力解释。

我创建了一个图像列表，当您将鼠标悬停在一个元素上（使用 css）时可见，每个图像也是一个单选按钮，可以选择并用作表单的一部分。所有图像基本上都是某个目录中的所有图像，您也可以上传到。

我设法在每个图像旁边添加了一个“删除”按钮，这将触发一个调用 php 脚本的函数来删除该特定图像而无需重新加载页面。使用 xmlhttp.which 工作正常。

但是图像列表不会自行刷新。如图所示，当我将鼠标悬停在元素上时，我刚刚删除的图像仍然可见，直到我刷新页面然后它刷新列表。

显然我不想刷新页面，这就是使用 ajax 的全部意义所在。所以有什么想法我能做什么？代码如下：

<script>
function deleteImage(){
 var answer =  confirm('Are you SURE you wish to delete this?')
 if (answer) {
   var image = document.getElementById('filepath').value;
   var xmlhttp;
     if (window.XMLHttpRequest)
     {
     xmlhttp=new XMLHttpRequest();
     }
     else
     {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
     document.getElementById("uploadmsg").innerHTML=xmlhttp.responseText;
     }
    }
  xmlhttp.open("POST","delete.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("image="+image);
}
}

然后是 php/html 来调用它。

<?php
  $dir = "../images/";      
  $dh = opendir( $dir );
  while( $filename = readdir( $dh ) ) {
       $filepath = $dir.$filename;
       $gallery[] = $filepath;
       $list[] = $filename;           
  }
  sort( $gallery );
    sort( $list);
  $num_pics = count($gallery);
?>

<div id='chooseimg'  ><input type="text" value="Choose Image"><span><ul>        
<?php

$a = 2;
while($num_pics > $a)
{
    ?> 
    <li>
<input type='radio' name='image' value='<?php echo $list[$a]; ?>'>
<?php echo $list[$a]; ?> 
<div id='imglist'><img src='<?php echo$gallery[$a]; ?>' /></div>
<button type='button' onclick="deleteImage()">Delete</button> 
<input type="hidden" id="filepath" value="<?php print $gallery[$a]; ?>"/> </li>
    <?php
    $a ++;  }   
        ?>
</ul></span></div>
<div id="uploadmsg"> </div>

该文件delete.php包含：

<?php 
$image = $_POST['image'];
if (!empty($image)){
unlink($image);
echo "<b>Image deleted<b>";
}
?>

并且使悬停在事物上的css基本上是一个设置为span的div内部，但是当它移动到时， 我认为没有人需要更多信息，但如果你需要，请告诉我。#chooseimageleft:99999px;hoverchooseimgleft:0px;

作为旁注，我不确定这是否是实际的 ajax？也许有人可以为我澄清。

如果您能提供帮助，我将不胜感激。我已经用谷歌搜索了几个小时，但找不到任何东西。

4

1 回答 1

0

ok so for anyone who has the same problem i figured it out.

the code to display all the images along with their radio and delete buttons are stored in a separate php file:

<?php
  $dir = "../images/";      
  $dh = opendir( $dir );
  while( $filename = readdir( $dh ) ) {

       $filepath = $dir.$filename;
       $gallery[] = $filepath;
       $list[] = $filename;           
  }
  sort( $gallery );
  sort( $list);
  $num_pics = count($gallery);
?>

<div id="choose"><div id="echo">
<div style="background-color: #F04D8E; color: #ffffff;">Choose Image</div></div> 
<span><ul>  

<?php
$a = 3;
while($num_pics > $a)
{
$image = $gallery[$a];
    ?> 

    <li>

//the radio button triggers an event which then showsthe image selected

<input id="radio" type='radio' name='image' onchange="thumb('<?php echo $image; ?>')" 
value='<?php echo $list[$a]; ?>'><?php echo $list[$a]; ?> 
<div id='gallery'>

// the delete button sends the images 'id' in its parameter
<button style="float:right;" type='button' 
onclick="deleteImage('<?php echo $image; ?>', '<?php echo $list[$a]; ?>'    )">    
Delete</button>
    <img src='<?php echo $image; ?>' /></div>
      </li>
    <?php

    $a ++;
 }                      
?>
</ul></span></div><br>

in the main page i call this script into a div straight away and also refresh it after the deleteImage function has been requested:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

window.onload = function(){
$('#result').load('show.php');
}

function deleteImage(id, name){
var answer =  confirm('Are you SURE you wish to delete ' + name + ' ?') 
if (answer) {
$.post("delete.php", { image: id })
.done(function(){
$('#uploadmsg').html("<b>" + name + " deleted </b>");
$('#result').ready(function(){
$('#result').load('show.php');

});
});
}}

function thumb(image){

$('#echo').html("<img src='"+image+"'>");

}

then all i need in the page is a div with id as result

oh and the delete.php page is still:

<?php 
$image = $_POST['image'];
if (!empty($image)){
unlink($image);
}
?>

someone said this is dangerous? but i can't see why.

and questions feel free to ask

thanx

于 2013-04-13T09:43:49.943 回答