使用ajax调用从php服务器发送图像

小编典典

使用ajax调用从php服务器发送图像

ajax

我要尝试做的就是从服务器中搜索文件并显示图片。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。目前，我忽略了任何类型的错误检查，我只是试图使其正常工作，并假设输入全部有效

阅读 235

2020-07-26

共1个答案

小编典典

建议：

试试这个链接：

使用PHP的图像数据URI

<?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 /浏览器和PHP /后端服务器之间的实际HTTP通信。您可以使用Telerek Fiddler或Firebug等工具。

希望有帮助！

2020-07-26