使用ajax調用從php服務器發送圖像

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';
}

附注。 目前，我忽略任何類型的錯誤檢查，我只是想讓它工作並假設輸入都是有效的

Answer 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 / Browser與PHP /后端服務器之間的實際HTTP流量。 您可以使用Telerek Fiddler或Firebug等工具。

'希望有所幫助！

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調用從php服務器發送圖像

問題描述

3 個解決方案

解決方案1
2 已采納 2016-09-19 04:20:44

解決方案2
1 2016-09-19 06:28:52

解決方案3
0 2016-09-19 06:49:41

解決方案4
0 2016-09-19 06:50:55

使用ajax調用從php服務器發送圖像

問題描述

3 個解決方案

解決方案1 2 已采納 2016-09-19 04:20:44

解決方案2 1 2016-09-19 06:28:52

解決方案3 0 2016-09-19 06:49:41

解決方案4 0 2016-09-19 06:50:55

解決方案1
2 已采納 2016-09-19 04:20:44

解決方案2
1 2016-09-19 06:28:52

解決方案3
0 2016-09-19 06:49:41

解決方案4
0 2016-09-19 06:50:55