Send image from php server using ajax call

Question

The short of what I'm trying to do is search for a file and display a picture from the server. The HTML has a simple search bar that allows you to type in a search term. The JavaScript uses an ajax request to call the PHP file, and the PHP finds the image on the server and sends it back to be displayed.

What happens right now is that the image isn't displayed, and I get an icon indicating some invalid image. The ajax call appears to be working, but I think the data I'm sending back isn't correct. I've been trying to search for it but everyone seems to have a different opinion on how to do it and it's kind of confusing.

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. For the moment, I'm ignoring any sort of error checking, I'm just trying to get it working and assuming the input is all valid

have you logged it in console or made alert to check the value. — Sasikumar
– Sasikumar, Commented Sep 19, 2016 at 4:17
try to change .append with .html, but fisrt check the preview from PHP file. — Denny Sutedja
– Denny Sutedja, Commented Sep 19, 2016 at 4:20
I have, and I get something that looks like an encoded image in an image tag: <img src="data:image/jpeg;base64,aW1hZ2VzL2hpdG9taV90YW5ha2FqcGVn"> — Michael Yousef
– Michael Yousef, Commented Sep 19, 2016 at 4:22
Try my suggestions below. Note the use of mime_content_type(). Note, too, that "aW1hZ2VzL2hpdG9taV90YW5ha2FqcGVn‌" looks awfully short to be a legitimate jpeg file :) I'd strongly suggest looking at your HTTP request/response with a tool like Fiddler, FF/Firebug and/or Chrome Developer Tools. To make sure you're actually sending what you think you're sending. IMHO... — paulsm4
– paulsm4, Commented Sep 19, 2016 at 4:27
@paulsm4 yeah you were right, it's a lot longer now and that makes more sense. However, my page still isn't displaying the image. — Michael Yousef
– Michael Yousef, Commented Sep 19, 2016 at 4:32

halfer · Accepted Answer · 2024-06-02 18:47:47Z

1

Suggestions:

Try this link: Image Data URIs with PHP

Code:

<?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, '">';
    ...

Debug the actual HTTP traffic between your jQuery/Browser and your PHP/back-end server. You can use a tool like Telerek Fiddler or Firebug, among many others.

edited Jun 2, 2024 at 18:47

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Sep 19, 2016 at 4:20

paulsm4

123k23 gold badges175 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Yousef Over a year ago

I tried this, I get back a very long return from the PHP file with what I assume is the image file I requested. However, the HTML doesn't display anything.

paulsm4 Over a year ago

Q: So what did Firebug show you? Q: What happens if you browse directly to the image (httpd://myserver/images/myimage.jpeg), without PHP?

Stoycho Trenchev Over a year ago

$image = "images/".$searchterm."jpeg"; goes $image = "images/".$searchterm.".jpeg";

snehal · Accepted Answer · 2016-09-19 06:28:52Z

1

Use file_get_contents it will display the image on browser.

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

answered Sep 19, 2016 at 6:28

snehal

741 bronze badge

Comments

Stoycho Trenchev · Accepted Answer · 2016-09-19 14:07:20Z

0

Please change the url property in the object, used in your .ajax() method call. The path to your search.php is incorrect.

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

goes to:

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

edited Sep 19, 2016 at 14:07

answered Sep 19, 2016 at 6:50

Stoycho Trenchev

5554 silver badges12 bronze badges

1 Comment

abarisone Over a year ago

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".

Collectives™ on Stack Overflow

Send image from php server using ajax call

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related