php - 从数据库中下拉搜索，获取不同型号/品牌的图像并显示

Question

我的问题是显示与 mysql 结果关联的图像...假设结果 ID=250 且 Name=brand.model，那么我想要一段代码在文件夹中搜索图像服务器上的名称 id_brand.model.jpg。

数据库结构为id、master、name。当用户从下拉列表中选择品牌+型号时，它应该从文件夹中获取图像(也可以从数据库中获取图像，现在哪个更好)，并且图像都具有唯一的名称，应该作为部分名称进行回显。

(帮助理解我的意思的图片 http://imgur.com/a/7XwVd )

这是我已经编码的内容。 http://pastebin.com/kQF2qP64

感谢任何帮助。

Answer 1

首先，您需要绑定(bind) select 的 change 事件，将名称发送到函数来搜索文件，然后将文件附加到 DOM:

Javascript(Ajax)

// Every time a category is selected we request the files
$('#category').on('change', function() {
    // If we have an element with images loaded, lets delete it
    var searchResult = $("#search-result").empty();
    // Now we serialize the form data, add an id to the form
    var searchBrand = $('#gender').find('option:selected').text();
    var searchModel = $('#category').find('option:selected').text();
    var fileName = searchBrand + '.' + searchModel + '.jpg';
    var searchData = { filename: fileName }
    // Now we create the ajax request with the form data
    var request = $.getJSON('search_images.php', searchData);
    // If the request success we show the images
    request.done(function(data) {
        // For each image found we add a new image to the DOM
        $.each(data, function(index, image_uri) {
            // First let's create the image element
            var img = $("<img>", {
                "class": "result-image",
                "src": image_uri
            });
            // Then we append it to the DOM
            searchResult.append( img );
        });
    });
    // If the search fails, we notify that no results were found
    request.fails(function() {
        alert('No results found');
    });
});

PHP(search_images.php)

<?
// Get the file name
$filename = $_GET['filename'];
// Find all the images
$images = glob("images/file/path/*_{$filename}");
// Return the images as json
echo json_encode($images);