从数据库中检索图像并以div显示

时间：2017-04-30 21:43:52

标签： php html mysql

我想从数据库中检索图像并在数据模型中以div显示它。我上传了图片保存到images-＆gt;空缺文件夹。现在我想在按下按钮时显示它。每个图像名称为'vacancyid'.jpg格式。我尝试使用以下代码。但我没有成功。 

<?php
require('dbconnection.php');
$sql="select * from vacancy";
$res=mysqli_query($conn,$sql);
if(mysqli_num_rows($res)>0){

while($row=mysqli_fetch_assoc($res)){
    ?>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
    </script>
    <div class="bs-calltoaction bs-calltoaction-primary" id="jobvacancydiv<?php echo $row['vacancyid'];?>">
        <div class="row">
            <div class="col-md-9 cta-contents">
                <form action="sendemail.php" enctype="multipart/form-data" method="post">
                <h1 class="cta-title">Its a Call To Action</h1>
                <div class="cta-desc">
                    <input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
                    <input type="text" value='<?= $row['company_name'];?>' readonly style="width:    75%"><br><br>
                    <input type="text" value='<?= $row['location'];?>' readonly style="width: 75%"><br><br>
                    <input type="text" value='<?= $row['qulification'];?>' readonly style="width: 75%"><br><br>
                    <input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
                    <input type="text" value='<?= $row['indate'];?>' readonly style="width: 37.5%">&nbsp;
                    <input type="text" value='<?= $row['expdate'];?>' readonly style="width: 37.5%"><br>
                    <input type="text" id="email" name="email" value='<?= $row['email'];?>'><br>
                    <input type="file" name="uploaded_file" id="uploaded_file" class="text-center center-block well well-sm">
                    <input type="submit" id="btn" name="btn" class="btn btn-primary" value="Apply"></input>
                    <button id="showimg" name="showimg" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>
                    <?php
                    if(isset($_POST['showimg'])){
                        ?>
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title" id="myModalLabel">Image preview</h4>
                                    </div>
                                    <div>
                                        <?php
                                        //$imageData = base64_encode($row['image']);

                                        // Format the image SRC:  data:{mime};base64,{data};
                                        //$src = 'data:images/vacancy;base64,'.$imageData;
                                        $src='images/vacancy'.$row['vacancyid'].'.jpg';
                                        echo "<img src='".$src."'>";

                                        ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php

                    }
                    ?>
                </div>
                </form>

            </div>

        </div>
        </div>
    <script>
        window.setInterval(function(){

            var current = new Date();
            var expiry = new Date("<?= $row['expdate'];?>");

            if(current.getTime()>expiry.getTime()){
                $('#jobvacancydiv<?php echo $row['vacancyid'];?>').hide();
            }
            else{
                $('#jobvacancydiv<?php echo $row['vacancyid'];?>').show();
            }

        });
    </script>
    </div>
    <?php
    }
 }
else{
echo mysqli_error($conn);
}
?>

3 个答案:

答案 0 :(得分：0)

您的要求

您希望HTML表单页面中有两个按钮。其中一个按钮是Apply，它将发送电子邮件。第二个按钮名为Open Modal，用于打开带有来自预定义URL的图像的模态。这可以来自数据库以及在HTML表单页面加载上获取的数据库。它与表单中的HTML文件输入字段无关。

您遇到的问题

单击Open Modal按钮时未显示模态。

在您的代码中，您在PHP条件下拥有模态，只有在以下条件符合

时才会触发 
if(isset($_POST['showimg'])) {

提议的解决方案

由于$_POST仅在通过POST方法将信息传递到此页面时才会起作用，因此上述代码无效。这只能在HTML表单的操作脚本中实现。由于您的模态不依赖于任何POSTED信息并且应该在按钮上显示，因此只需使用以下代码即可。

<form action="sendemail.php" enctype="multipart/form-data" method="post">
            <h1 class="cta-title">Its a Call To Action</h1>
            <div class="cta-desc">
                <input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
                <input type="text" value='<?= $row['company_name'];?>' readonly style="width:    75%"><br><br>
                <input type="text" value='<?= $row['location'];?>' readonly style="width: 75%"><br><br>
                <input type="text" value='<?= $row['qulification'];?>' readonly style="width: 75%"><br><br>
                <input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
                <input type="text" value='<?= $row['indate'];?>' readonly style="width: 37.5%">&nbsp;
                <input type="text" value='<?= $row['expdate'];?>' readonly style="width: 37.5%"><br>
                <input type="text" id="email" name="email" value='<?= $row['email'];?>'><br>
                <input type="file" name="uploaded_file" id="uploaded_file" class="text-center center-block well well-sm">
                <input type="submit" id="btn" name="btn" class="btn btn-primary" value="Apply"></input>
                <button id="showimg" name="showimg" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>

                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="myModalLabel">Image preview</h4>
                            </div>
                            <div>
                                <?php
                                    $imageData = base64_encode($row['image']);

                                    // Format the image SRC:  data:{mime};base64,{data};
                                    $src = 'data:images/vacancy;base64,'.$imageData;
                                    echo "<img src='".$src."'>";
                                ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

此代码和您的代码中唯一的变化是我从所有条件中取出了Modal。

希望这有帮助。

答案 1 :(得分：0)

删除<?php if(isset($_POST['showimg'])){ ?>并使用echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image']).'"/>'; ?> 

<?php
require('dbconnection.php');
$sql = "select * from vacancy";
$res = mysqli_query($conn, $sql);
if (mysqli_num_rows($res) > 0) {

    while ($row = mysqli_fetch_assoc($res)) {
        ?>
        <script
                src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
        </script>
        <div class="bs-calltoaction bs-calltoaction-primary" id="jobvacancydiv<?php echo $row['vacancyid']; ?>">
            <div class="row">
                <div class="col-md-9 cta-contents">
                    <form action="sendemail.php" enctype="multipart/form-data" method="post">
                        <h1 class="cta-title">Its a Call To Action</h1>
                        <div class="cta-desc">
                            <input type="text" value='<?= $row['catogary']; ?>' readonly style="width: 75%"><br><br>
                            <input type="text" value='<?= $row['company_name']; ?>' readonly
                                   style="width:    75%"><br><br>
                            <input type="text" value='<?= $row['location']; ?>' readonly style="width: 75%"><br><br>
                            <input type="text" value='<?= $row['qulification']; ?>' readonly style="width: 75%"><br><br>
                            <input type="text" value='<?= $row['catogary']; ?>' readonly style="width: 75%"><br><br>
                            <input type="text" value='<?= $row['indate']; ?>' readonly style="width: 37.5%">&nbsp;
                            <input type="text" value='<?= $row['expdate']; ?>' readonly style="width: 37.5%"><br>
                            <input type="text" id="email" name="email" value='<?= $row['email']; ?>'><br>
                            <input type="file" name="uploaded_file" id="uploaded_file"
                                   class="text-center center-block well well-sm">
                            <input type="submit" id="btn" name="btn" class="btn btn-primary" value="Apply"></input>
                            <button id="showimg" name="showimg" type="button" class="btn btn-primary"
                                    data-toggle="modal" data-target="#myModal">Open Modal
                            </button>
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true">×
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">Image preview</h4>
                                        </div>
                                        <div>
                                            <?php
                                            echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image']).'"/>';
                                            ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>

            </div>
        </div>
        <script>
            window.setInterval(function () {

                var current = new Date();
                var expiry = new Date("<?= $row['expdate'];?>");

                if (current.getTime() > expiry.getTime()) {
                    $('#jobvacancydiv<?php echo $row['vacancyid'];?>').hide();
                }
                else {
                    $('#jobvacancydiv<?php echo $row['vacancyid'];?>').show();
                }

            });
        </script>
        </div>
        <?php
    }
} else {
    echo mysqli_error($conn);
}
?>

答案 2 :(得分：-1)

不确定此处是如何引用图像的。 data：images而不是尝试将图像存储在服务器上的相对路径。

相关问题
最新问题