使用ajax调用从php服务器发送图像
[英]Send image from php server using ajax call
问题描述
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. HTML 有一个简单的搜索栏，允许您输入搜索词。 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. JavaScript 使用ajax 请求调用PHP 文件，PHP 在服务器上找到该图像并将其发送回显示。
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. ajax 调用似乎有效，但我认为我发回的数据不正确。 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 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 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
<?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目前，我忽略任何类型的错误检查，我只是想让它工作并假设输入都是有效的
3 个解决方案
解决方案1
2 已采纳 2016-09-19 04:20:44
SUGGESTIONS: 几点建议：
- Try this link: 试试这个链接：
Image Data URIs with PHP 使用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, '">';
...
- Debug the actual HTTP traffic between your jQuery/Browser and your PHP/back-end server. 调试jQuery / Browser与PHP /后端服务器之间的实际HTTP流量。 You can use a tool like Telerek Fiddler or Firebug , among many others. 您可以使用Telerek Fiddler或Firebug等工具。
'Hope that helps! '希望有所帮助！
解决方案2
1 2016-09-19 06:28:52
Use file_get_contents it will display the image on browser. 使用file_get_contents它将在浏览器上显示图像。
$image = "images/".$searchterm.".jpeg";
echo '<img src="data:image/jpeg;base64,'.base64_encode(file_get_contents($image)).'">';
解决方案3
0 2016-09-19 06:49:41
why are you converting image to base64 when you are calling image with ajax, you can just pass the image relative path to the img tag and it will work for you i have updated code for your ajax file just make as simple changes and it will work as you want. 当你用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';
}
解决方案4
0 2016-09-19 06:50:55
Please change the url property in the object, used in your .ajax() method call. 请更改.ajax（）方法调用中使用的对象中的url属性。 The path to your search.php is incorrect. search.php的路径不正确。
$.ajax({
url: '/search.php',
goes to: 去：
$.ajax({
url: './search.php',
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.