如何为每个图像预览添加字幕字段，并通过一个提交按钮发布所有字幕

Question

这是我的代码，我想为每个图像预览添加一个输入字段并将其保存到db。我该如何发布它们？

$fetch_imgid=$con->prepare("SELECT * FROM attempt010 where link='$rand'");
$fetch_imgid->setFetchMode(PDO:: FETCH_ASSOC);
$fetch_imgid->execute();
?>
<ul class="reorder_ul reorder-photos-list" id="previewImg">
    <?php
    while($row = $fetch_imgid->fetch()):
        $delid = $row['id'];
        //echo $row['id'].' '.$row['name'].'<br/>';?>
        <li id="image_li_<?php echo $row['id']; ?>" class="ui-sortable-handle" data-image-id="<?php echo $delid; ?>">
        <a href="javascript:void(0);" style="float:none;" class="image_link"><img src="uploads/<?php echo $row['name']; ?>" alt=""></a>
        <input type="submit" class="del_btn" value="Delete Image" />
        <input type="text" id="cap" name="cap[]" placeholder="Enter Caption Here" />
        <input type="hidden" id="cap_id" value="<?php echo $row['id']; ?>" />
    <?php
    endWhile;
    ?>
</ul>
<input type="submit" value="Add Caption" name="addcap" /> <?php include('addcap.php'); ?>

这是addcap.php

<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
if(isset($_POST['addcap'])){
    foreach($_POST['cap'])
    {
            $imgcap = $_POST['cap'];
            if($imgcap!=empty())
            {
                try
                {
                    $con=new PDO("mysql:host=localhost;dbname=newimg","root","");
                    $sql=$con->prepare("UPDATE attempt010 SET caption='$imgcap' WHERE id='$cap_id'");
                    $sql->execute();
                }
                catch(PDOException $e)
                {
                    echo $sql . "<br>" . $e->getMessage();
                }
            }
    }
}
?>

Answer 1

<input type="hidden" id="cap_id" value="<?php echo $row['id']; ?>" />

必须具有唯一的ID。您无法发送具有相同ID的多个字段。您只会得到最后一个。

例如：

$fetch_imgid=$con->prepare("SELECT * FROM attempt010 where link='$rand'");
$fetch_imgid->setFetchMode(PDO:: FETCH_ASSOC);
$fetch_imgid->execute();
?>
<form action="addcap.php" method="post">
<ul class="reorder_ul reorder-photos-list" id="previewImg">
    <?php
    $id_array="";
    while($row = $fetch_imgid->fetch()):
        $id_array = $id_array.$row['id'].",";
    $delid = $row['id'];
    //echo $row['id'].' '.$row['name'].'<br/>';?>
    <li id="image_li_<?php echo $row['id']; ?>" class="ui-sortable-handle" data-image-id="<?php echo $delid; ?>">
    <a href="javascript:void(0);" style="float:none;" class="image_link"><img src="uploads/<?php echo $row['name']; ?>" alt=""></a>
    <input type="text" id="cap_<?php echo $row['id']; ?>" placeholder="Enter Caption Here" />
<?php
endWhile;
$id_array = substr($id_array, 0, -1);
?>
<input type="hidden" id="cap_ids" value="<?php echo $id_array ; ?>" />
</ul>
<input type="submit" value="Add Caption" name="addcap" /> 
</form>

<!--addcap.php-->
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
if(isset($_POST['addcap'])){
    if(isset($_POST['cap_ids'])){
        $ids_array = explode(",", $_POST['cap_ids']);
        foreach($ids_array as $ids)
        {
                $idcap = 'cap_'.$ids;
                $imgcap = $_POST[$idcap];
                if($imgcap!=empty())
                {
                    try
                    {
                        $con=new 
PDO("mysql:host=localhost;dbname=newimg","root","");
                        $query = "UPDATE attempt010 SET 
caption='$imgcap' WHERE id='$ids'";
                        echo $query;
                        $sql=$con->prepare($query);
                        $sql->execute();
                    }
                    catch(PDOException $e)
                    {
                        echo $sql . "<br>" . $e->getMessage();
                    }
                }
        }
    }
}
?>

此代码看起来无法正常工作。因为您已经在同一页面中提交并形成了处理代码。表格背后的想法是将数据发布到不同的页面（在表单操作中设置），此页面将对此数据做点事并向用户显示结果。为了您的示例工作在第一个文件中形成表格，例如：

<form action="addcap.php">
    <inputs here>
</form>

如今，通常在用户可以继续使用页面/应用程序的情况下，在服务器端上进行了数据库操作。因此，了解如何使用jQuery和Ajax。也许是nodejs或其他新内容。