Question

我正在尝试在网页上显示图像，其中图像路径存储在MySQL表格中（表格列名称 - 位置）。但我无法显示图像。

我有一个动态下拉列表框，其中填充了所有图像名称。我想在用户点击此下拉列表中的图像名称后显示图像。如果我将完整路径放到img src，那么我就能从HTML表中看到我的图像。下面是我的代码到目前为止我试图得到输出。

您的建议将帮助我完成任务。需要你的帮助来更新我的知识。

$(function () {
        $("#Code").change(function () {
            $("#image").load("image.php?choice=" + $("#Code").val());
        });
    });

的index.php

<?php

mysql_connect('890.23.89.100', 'root', '');
mysql_select_db('abc');

$sql = "SELECT Code,location FROM Product_List ORDER BY Code ASC";
$result = mysql_query($sql);

echo "<select id='Code' name='Code' style='width: 120px'>";
while ($row = mysql_fetch_array($result))
{
    echo "<option value='" . $row['Code'] . "'>" . $row['Code'] . "</option>";

}
echo "</select>";

?>

<img
    src="../label_image/6015.jpg (??? how to get the image path here. i put thos manually and can display the image on webpage)"
    width="100%" height="100%">

image.php

<?php

$username = "root";
$password = "";
$hostname = "890.23.89.100";

$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
$selected = mysql_select_db("abc", $dbhandle) or die("Could not select examples");
$choice = mysql_real_escape_string($_GET['choice']);

$query = "SELECT location FROM Product_List WHERE Code='$choice'";

$result = mysql_query($query);

while ($row = mysql_fetch_array($result))
{
    echo "<option>" . $row{'location'} . "</option>";
}
?>

Answer 1

这是一种在下拉列表中更改图像的简单方法，我们假设每个代码都有一个图像名称，如code1具有图像code1.jpg等：

<select onchange="document.getElementById('Code').src = this.value">
    <option value="code1.jpg">image 1</option>
    <option value="code2.jpg">image 2</option>
    <option value="code3.jpg">image 3</option>
    <option value="code4.jpg">image 4</option>
</select>

<img id="Code" src="code1.jpg">

在Fiddle上进行测试。

以下是如何在你的代码中实现它，我选择使用mysqli语句，如果你更喜欢使用其他方式，只需做一些小修改，概念是一样的，我们也假设位置字段包含图像路径和图像名称：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "dummy";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error)
    die("Connection failed: " . $conn->connect_error);

$sql = "SELECT code, location FROM product_list ORDER BY code ASC";
$result = $conn->query($sql);

echo '<select onchange="document.getElementById(\'Code\').src = this.value">';
while ($row = $result->fetch_assoc())
    echo '<option value="' . $row['location'] . '">' . $row['code'] . '</option>';
echo '</select>';

$conn->close();

?>

<!--code1.jpg is defalut image-->
<img id="Code" src="code1.jpg">

以下是测试结果的快照，选择code1 get image1（code1.jpg），选择code3 get image3（code3.jpg）。

修改如果您想完全控制img属性并按照自己的方式进行自定义，可以采用不同的方式。如果我们仍然希望保持简单，并按照与示例相同的方式进行，我们可以像示例一样使用innerHTML：

<select onchange="document.getElementById('code').innerHTML = this.value"> <option value="<img id='img1' src='code1.jpg'>">image 1</option> <option value="<img id='img2' src='code2.jpg'>">image 2</option> <option value="<img id='img3' src='code3.jpg'>">image 3</option> <option value="<img id='img4' src='code4.jpg'>">image 4</option> </select> <div id="code"> <img id='img1' src='code1.jpg'> </div>

这将是你对php的新实现：

PHP部分

echo '<select onchange="document.getElementById(\'code\').innerHTML = this.value">'; while ($row = $result->fetch_assoc()) echo '<option value="<img id=' . $row['location'] . ' src=' . $row['location'] . '>">' . $row['code'] . '</option>'; echo '</select>';

HTML部分

<div id="code"> <img id='img1' src='code1.jpg'> </div>

Answer 2

你很亲密。尝试这样的事情：

$(function () {
    $("#Code").change(function () {
        var tmp = $("#Code").val()
        $.ajax({
            type: 'post',
             url: 'image.php',
            data: 'MyImg=' + tmp,
            success: function(d){
                //if (d.length) alert(d); //Just use this for testing
                $('#imgDlg').html(d); //inject img tag into previously empty div
                //$('#imgDlg').dialog('open'); //optional - use with jQueryUI dialog (lightbox)
            }
        });
    });
});

PHP：（image.php）

<?php
    $i = $_POST['MyImg'];
    //do your query here to get the image name, etc. For example: dog.jpg in the `img` directory

    $out = '<img src="img/dog.jpg" />'
    echo $out

参考文献：

AJAX request callback using jQuery

从动态下拉列表框中显示图像

2 个答案: