将图像 ID 的值传递给模式框提交脚本以更新图像

Question

我有模态框确认，当我选择特定图像时，我希望它通过新图像进行更改，下面的代码显示当我存储图像ID的值时：

    while ($row = mysqli_fetch_array($result)) {
    echo  '
    <img  id="'.$row['id'].'" data-toggle="modal" data-target="#myModal2" src = "data:image;base64,'.$row['image'].'" class="imageHieght modal-content imageStyle clickedImage w3-round-large w3-border" style="width:100%">
    <form method="post" action="'.$_SERVER['PHP_SELF'].'">               
    <button href="#" name="updateImage" type="button" class ="w3-button imageButtons w3-round-large" data-toggle="modal" data-target="#myModal1" >change</button>                
    <button href="#" name="deleteImage" class ="w3-button imageButtons w3-round-large" onclick='return confirm("Are you sure ?");'>Delete</button>
    <input type="hidden"  name="imageId" value='.$row['id'].' />
    </form>
    </div>';
    }

和下面的代码更新图像查询：

 if(isset($_POST['submit1'])) {
        $image1 =addslashes($_FILES['image1']['tmp_name']);
        $name1 =addslashes($_FILES['image1']['name']);
        $image1= file_get_contents($image1);
        $image1= base64_encode($image1);
        $stmt = $con->prepare(" UPDATE images SET name = ? , image = ? , caption = ? WHERE id = ? ");
        $stmt->bind_param("sssi",$name1,$image1,$caption1,$id1);
        $caption1 = $_POST['imageComment1'];
        $id1 = $_POST['imageId'];
        $result = $stmt->execute();
        if ($result) {
            echo'<div class="w3-panel w3-green w3-large w3-card w3-center hideMessage">Done</div>';     
        } else {
            echo '<div class="w3-panel w3-red w3-large w3-card w3-center hideMessage">try again</div>';   
       } 
   $stmt->close();
}

问题出在 $id 1 中，因为当我直接给出 id 时它是工作，但是当我使用 $_POST['imageId'] 它现在正在工作时，我希望我找到了答案

模态框代码：

<div class="modal fade center" id="myModal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">   
  <div class="modal-body">
    <form role="form" method="post" class="w3-center" 
  enctype="multipart/form-data">    
    <div class="form-group">   
    <input type="file"  id="image1" name="image1"/>
    <br />
    <div class="form-group">
    <input type="text" class="form-control" id="imageComment1" 
    name="imageComment1" placeholder="" required> 
    </div>
    </div> 
    <button type="submit" name="submit1" id="save1" class="w3-button 
      imageButtons1 w3-round-large">save      
    <span class="glyphicon glyphicon-ok"></span>
    </button>
   <button type="submit" class="w3-button imageButtons2 w3-red w3-round-
     large" data-dismiss="modal">
     cancel <span class="glyphicon glyphicon-remove"></span>
    </button>
    </form>      
    </div>        
   </div>
  </div>          
 </div>

Answer 1

问题出在。.

<input type="hidden"  name="imageId" value='.$row['id'].' />

这里生成的 HTML 是..

<input type="hidden"  name="imageId" value=Id1 />

这是错误的。

试试这个

while ($row = mysqli_fetch_array($result)) {
echo  '
<img  id="'.$row['id'].'" data-toggle="modal" data-target="#myModal2" src = "data:image;base64,'.$row['image'].'" class="imageHieght modal-content imageStyle clickedImage w3-round-large w3-border" style="width:100%">
<form method="post" action="'.$_SERVER['PHP_SELF'].'">               
<button href="#" name="updateImage" type="button" class ="w3-button imageButtons w3-round-large" data-toggle="modal" data-target="#myModal1" >change</button>                
<button href="#" name="deleteImage" class ="w3-button imageButtons w3-round-large" onclick='return confirm("Are you sure ?");'>Delete</button>
<input type="hidden"  name="imageId" value="'.$row['id'].'" />
</form>
</div>';
}

Answer 2

表单中没有 imageid 输入。您需要将其添加到模态表单中，并为更改的点击分配值。

首先，您需要用以下代码替换更改按钮：

我添加了onclick事件，它将id传递给jquery函数，这将更改您的隐藏输入值。

<button onclick="setImgid(' . $row['id'] . ')" href="#" name="updateImage" type="button" class ="w3-button imageButtons w3-round-large" data-toggle="modal" data-target="#myModal1" >change</button>   

在脚本中添加 jquery 函数：

<script>
function setImgid(imgId) {
   $("#imageId").val(imgId);
}
</script> 

然后在模式窗体中添加<input type="hidden" id="imageId" name="imageId" />。

注意：<input type="hidden" name="imageId" value='.$row['id'].' />不需要此功能，则可以在不使用时将其删除。

整个代码：

 while ($row = mysqli_fetch_array($result)) {
echo  '
<img  id="'.$row['id'].'" data-toggle="modal" data-target="#myModal2" src = "data:image;base64,'.$row['image'].'" class="imageHieght modal-content imageStyle clickedImage w3-round-large w3-border" style="width:100%">
<form method="post" action="'.$_SERVER['PHP_SELF'].'">               
<button onclick="setImgid(' . $row['id'] . ')" href="#" name="updateImage" type="button" class ="w3-button imageButtons w3-round-large" data-toggle="modal" data-target="#myModal1" >change</button>               
<button href="#" name="deleteImage" class ="w3-button imageButtons w3-round-large" onclick='return confirm("Are you sure ?");'>Delete</button>
<input type="hidden"  name="imageId" value='.$row['id'].' />
</form>
</div>';
}

模态框代码：

<div class="modal fade center" id="myModal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">   
  <div class="modal-body">
    <form role="form" method="post" class="w3-center" 
  enctype="multipart/form-data">    
    <div class="form-group">   
    <input type="file"  id="image1" name="image1"/>
    <br />
    <div class="form-group">
    <input type="text" class="form-control" id="imageComment1" 
    name="imageComment1" placeholder="" required> 
    </div>
    </div> 
    <input type="hidden" id="imageId" name="imageId" />
    <button type="submit" name="submit1" id="save1" class="w3-button 
      imageButtons1 w3-round-large">save      
    <span class="glyphicon glyphicon-ok"></span>
    </button>
   <button type="submit" class="w3-button imageButtons2 w3-red w3-round-
     large" data-dismiss="modal">
     cancel <span class="glyphicon glyphicon-remove"></span>
    </button>
    </form>      
    </div>        
   </div>
  </div>          
 </div>