Question

我想要做的就是搜索文件并从服务器显示图片。 HTML有一个简单的搜索栏，允许您输入搜索词。 JavaScript使用ajax请求来调用PHP文件，PHP在服务器上查找图像并将其发回以显示。

现在发生的事情是图像没有显示，我得到一个图标，表示一些无效的图像。 ajax呼叫似乎正在运行，但我认为我发回的数据并不正确。我一直在努力寻找它，但每个人似乎对如何做到这一点都有不同的看法，这让人感到困惑。

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>
<script src="search.js"></script>
<style type="text/css"></style>
</head>
</body>
    <header>
    <h1>My Page</h1>
    </header>
    <input type=text name="search" id="searchbox" placeholder="Search...">
    <input type=button value="Search" id=search><br>
    <div id="images"></div>
</body>

的JavaScript

$(document).ready(function() {
    $("#search").on('click', function(){
        $.ajax({
           url: '/search.php',
           type: 'POST',
           data: $("#searchbox").serialize(),
           success: function(data) {
            $('#images').append(data);
           },
           error: function() {
            alert('failure');
           }
        });
    });
});

PHP

<?php
if(isset($_POST['search'])) {
    $searchterm = $_POST['search'];
    $image = "images/".$searchterm.".jpeg";
    echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'">';
}
else {
    echo 'Error: image not found';
}

PS。目前，我忽略了任何类型的错误检查，我只是想让它工作并假设输入都是有效的

Answer 1

SUGGESTIONS：

试试这个链接：

Image Data URIs with PHP

<?php
if(isset($_POST['search'])) {
    $searchterm = $_POST['search'];
    $image = "images/".$searchterm."jpeg";
    $imageData = base64_encode(file_get_contents($image));
    $src = 'data: '.mime_content_type($image).';base64,'.$imageData;
    echo '<img src="', $src, '">';
    ...

调试jQuery / Browser与PHP /后端服务器之间的实际HTTP流量。您可以使用Telerek Fiddler或Firebug等工具。

＆＃39;希望有所帮助！

Answer 2

使用file_get_contents它将在浏览器上显示图像。

$image = "images/".$searchterm.".jpeg";
echo '<img src="data:image/jpeg;base64,'.base64_encode(file_get_contents($image)).'">';

Answer 3

为什么在使用ajax调用图像时将图像转换为base64，您可以将图像相对路径传递给img标记，它可以为您工作我已经为您的ajax文件更新了代码，只需进行简单的更改即可它会按你的意愿工作。

$siteurl = "http://localhost/ajaximage/";

if(isset($_POST['search'])) {
    $searchterm = $_POST['search'];
    echo $image = $siteurl . "image/".$searchterm.".jpg";
    echo '<img src="'.$image. '">';
}
else {
    echo 'Error: image not found';
}

Answer 4

请更改.ajax（）方法调用中使用的对象中的url属性。 search.php的路径不正确。

$.ajax({
    url: '/search.php',

转到：

$.ajax({
    url: './search.php',

使用ajax call

4 个答案: