Question

我想知道在用户选择其中一个类别后显示图像的最佳方式是什么：

<form method="post" action="../user/posting.php">
        <input type="text" name="title" required placeholder="Title"/>
        <textarea name="body" rows="6" cols="50" placeholder="Details....."></textarea>
        //Here is where the selection of the icon is
        <select name="stat_icon" required>
            <option name="fire" value="fire">Fire</option>
            <option name="traffic" value="traffic">Traffic</option>
            <option name="construction" value="construction">Construction</option>
            <option name="crash" value="crash">Crash</option>
            <option name="weather" value="weather">Weather</option>
            <option name="robbery" value="robbery">Robbery</option>
            <option name="deviation" value="deviation">Deviation</option>
            <option name="police" value="police">Police</option>
        </select>
        <input type="text" name="location" required placeholder="Location">
        <input type="file" name="img_stat">

        <input type="submit" value="Stat!" />
</form>

我不知道显示图像的最佳方式是什么，如果我必须先上传图像，或者我只需设置一些if语句来选择图像就在我的某个文件夹中。我使用PHP，HTML和数据库mysql。任何建议

Answer 1

您可以使用JQuery显示图像，当然您必须先将所有图像上传到图像目录。

$(document).ready(function() {
    $("#imageSelector").change(function() {
        var src = $(this).val();
        $("#imagePreview").html(src ? "<img src='path/to/your/image/" + src + ".jpg'>" : "");
    });
});

<select id="imageSelector" name="stat_icon" required>
        <option name="fire" value="fire">Fire</option>
        <option name="traffic" value="traffic">Traffic</option>
        <option name="construction" value="construction">Construction</option>
        <option name="crash" value="crash">Crash</option>
        <option name="weather" value="weather">Weather</option>
        <option name="robbery" value="robbery">Robbery</option>
        <option name="deviation" value="deviation">Deviation</option>
        <option name="police" value="police">Police</option>
    </select>
<div id="imagePreview"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

Answer 2

好的，所以基本上你应该这样做（这个建议只是我的意见，它是我使用它的一种方式）：

你应该已经将你的imgs保存在数据库中了（img的名称，这样你就可以从文件夹中取出它）。
当用户从表单中选择目录时，您应该拥有一个PHP代码，该代码可以获取所选数据并带来与用户选择进行比较的数据。我的意思是数据是Imgs。

这是我在网站上已经拥有的代码的一个示例，它很简单，我使用的是PDO而不是MYSQLI：

<form action="" method="post">
   <select  name="catalog" class="form-control input-lg"  tabindex="1" required>
        <option selected>Pick Your Favorite Catalog</option>
            <?php // Fetching the catalogs names from the database 
                while($FCN = $FetchCatalogsName->FETCH(PDO::FETCH_ASSOC)) 
                    { 
                        ?><option value="<?php echo $FCN['catalog'];?>"><?php echo $FCN['catalog'];?></option><?php 
                    }
            ?>
    </select>
    <br>
    <input type="submit" name="filter" class="col-sm-4 form-control input-lg" value="Show Catalog">
</form>

现在我们必须创建将从

中恢复img目录的php代码

  <?php
        include_once('lib/dbconnect.php');

        if(isset($_POST['filter']))
            {
                $catalog = $_POST['catalog'];
                $FetchImgs = $conn->prepare("SELECT * FROM picture WHERE catalog = ? "); // Fetching all Imgs that related to that catalog that the user has picked . 
                $FetchImgs->execute(array($catalog));
                if($FetchImgs) 
                    {
                        ?>
                            <?php while($FI = $FetchImgs->fetch(PDO::FETCH_ASSOC)) 
                                { 
                                ?>  
                                    <div class="col-md-3">
                                        <img src="uploading/<?php echo $FI['Filename']; ?>"> // $FI['Filename'] this will return the name of the img from the database . 
                                    </div>
                            <?php }

                    }
                else
                    {
                        echo "something went wrong ";
                    }
            }

?>

注意：在我的情况下，php代码与html表单位于同一页面中，并且直接位于其下方。

Answer 3

我不知道显示图像的最佳方式是什么，如果我必须先上传图像，或者我只需设置一些if语句来选择图像就在我的某个文件夹中。

如果您的唯一目的是根据选择显示图像，则无需上传任何图像。这里唯一的问题是，您的图片名称应与value输入的select属性相对应。此外，图像扩展应该是一致的。

首先，从<input type="file" name="img_stat">中删除此行form，在提交表单后，显示如下所示的相应图片：

$image_path = '/yourImagePath/' . $_POST['stat_icon'] . '.jpg';
echo '<img src="' . $image_path . '" alt="stat_icon" />';

注意（S）：

根据您的图片扩展名更改.jpg

更改/yourImagePath/并提供相应的目录路径

用户选择图像后显示图像的最佳方式

3 个答案: